/**
 * CECCM Design System - Design Tokens
 *
 * This file contains all CSS custom properties (variables) that serve as the
 * single source of truth for colors, typography, spacing, and component styles.
 * All other CSS files should import this and reference these tokens.
 *
 * ⚠️ IMPORTANT: This file should ONLY contain:
 * - CSS custom properties (:root { --variable: value; })
 * - Theme variant blocks ([data-theme="light"], body.admin-page, etc.)
 * 
 * DO NOT add utility classes (.text-primary, .bg-primary, etc.) here.
 * Utility classes belong in assets/css/components.css
 *
 * @version 2.0.0
 * @date 2026-02-18
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */
:root {
  /* ============================================
       COLOR PALETTE
       ============================================ */

  /* Primary Colors - Navy Theme (Admin/Dashboard/Public Pages) */
  --color-primary-50: #e6f0ff;
  --color-primary-100: #b3d1ff;
  --color-primary-200: #80b3ff;
  --color-primary-300: #4d94ff;
  --color-primary-400: #4a9eff;
  --color-primary-500: #0a2a4a;
  --color-primary-600: #082538;
  --color-primary-700: #051c2a;
  --color-primary-800: #03131c;
  --color-primary-900: #010a0e;

  /* Primary Aliases */
  --color-primary: var(--color-primary-500);
  --color-primary-light: var(--color-primary-400);
  --color-primary-dark: var(--color-primary-600);

  /* Accent Colors - Cyan/Violet (Landing/Auth) */
  --color-accent-cyan: #06b6d4;
  --color-accent-cyan-light: #22d3ee;
  --color-accent-cyan-dark: #0891b2;
  --color-accent-violet: #8b5cf6;
  --color-accent-violet-light: #a78bfa;
  --color-accent-violet-dark: #7c3aed;
  --color-accent-amber: #f59e0b;
  --color-accent-green: #22c55e;
  --color-accent-red: #ef4444;

  /* Accent Aliases */
  --color-accent: var(--color-accent-cyan);
  --color-accent-secondary: var(--color-accent-violet);
  --color-accent-glow: var(--color-accent-cyan-light);

  /* Background Colors - Light Theme (Admin/Public) */
  --color-bg-light: #ffffff;
  --color-bg-light-secondary: #f8f9fa;
  --color-bg-light-tertiary: #e9ecef;
  --color-bg-light-elevated: #ffffff;

  /* Background Colors - Dark Theme (Landing/Auth) */
  --color-bg-dark: #0a0e1a;
  --color-bg-dark-secondary: #111827;
  --color-bg-dark-tertiary: #1e293b;
  --color-bg-dark-elevated: #1e293b;
  --color-bg-glass: rgba(255, 255, 255, 0.03);
  --color-bg-glass-hover: rgba(255, 255, 255, 0.06);

  /* Background Aliases */
  --color-bg-primary: var(--color-bg-dark);
  --color-bg-secondary: var(--color-bg-dark-secondary);
  --color-bg-tertiary: var(--color-bg-dark-tertiary);
  --color-bg-elevated: var(--color-bg-dark-elevated);

  /* Text Colors - Light Theme */
  --color-text-light: #333333;
  --color-text-light-secondary: #6c757d;
  --color-text-light-muted: #adb5bd;

  /* Text Colors - Dark Theme */
  --color-text-dark: #f8fafc;
  --color-text-dark-secondary: #94a3b8;
  --color-text-dark-muted: #64748b;

  /* Text Aliases (Default to dark for now) */
  --color-text-primary: var(--color-text-dark);
  --color-text-secondary: var(--color-text-dark-secondary);
  --color-text-muted: var(--color-text-dark-muted);

  /* Border Colors */
  --color-border-light: #dee2e6;
  --color-border-light-hover: #ced4da;
  --color-border-dark: rgba(255, 255, 255, 0.08);
  --color-border-dark-hover: rgba(255, 255, 255, 0.12);
  --color-border-glass: rgba(255, 255, 255, 0.12);
  --color-border-accent: rgba(6, 182, 212, 0.4);

  /* ============================================
       TYPOGRAPHY
       ============================================ */

  /* Font Families */
  --font-display: "Outfit", system-ui, -apple-system, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  /* Fallback font (used when specific fonts aren't loaded) */
  --font-fallback: "Inter", system-ui, -apple-system, sans-serif;

  /* Font Sizes - Based on 16px base */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */
  --text-5xl: 3rem; /* 48px */
  --text-6xl: 3.75rem; /* 60px */
  --text-7xl: 4.5rem; /* 72px */

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ============================================
       SPACING
       ============================================ */
  --space-0: 0;
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */

  /* ============================================
       BORDER RADIUS
       ============================================ */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* Legacy radius names (for backward compatibility) */
  --radius-base: var(--radius-md);
  --radius-large: var(--radius-xl);

  /* ============================================
       SHADOWS
       ============================================ */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Colored Shadows */
  --shadow-cyan: 0 0 40px rgba(6, 182, 212, 0.3);
  --shadow-cyan-sm: 0 0 20px rgba(6, 182, 212, 0.2);
  --shadow-violet: 0 0 40px rgba(139, 92, 246, 0.3);
  --shadow-primary: 0 4px 20px rgba(10, 42, 74, 0.3);

  /* Glassmorphism Shadows */
  --shadow-glass: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --shadow-glass-light: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

  /* ============================================
       TRANSITIONS
       ============================================ */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-smooth: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================
       FOCUS STYLES (Accessibility)
       ============================================ */
  /* Focus Ring Colors */
  --focus-color-primary: var(--color-accent-cyan, #06b6d4);
  --focus-color-secondary: var(--color-accent-violet, #8b5cf6);
  --focus-color-error: var(--color-accent-red, #ef4444);
  --focus-color-success: var(--color-accent-green, #22c55e);

  /* Focus Ring Dimensions */
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;
  --focus-ring-radius: 4px;

  /* Focus Ring Shadows */
  --focus-ring-shadow: 0 0 0 6px rgba(6, 182, 212, 0.25);
  --focus-ring-shadow-dark: 0 0 0 6px rgba(6, 182, 212, 0.3);
  --focus-ring-shadow-light: 0 0 0 6px rgba(6, 182, 212, 0.2);

  /* Focus Ring for Error States */
  --focus-ring-error: 0 0 0 6px rgba(239, 68, 68, 0.25);
  --focus-ring-success: 0 0 0 6px rgba(34, 197, 94, 0.25);

  /* Focus Transition */
  --focus-transition: outline 150ms ease-in-out, box-shadow 150ms ease-in-out;

  /* ============================================
       Z-INDEX SCALE
       ============================================
       
       A systematic z-index scale to prevent conflicts.
       Each level has a specific purpose. Use these variables
       instead of hardcoded z-index values.
       
       Scale Overview:
       - Negative: Behind normal content
       - 0-10: Content layering within components
       - 100-300: UI elements (dropdowns, sticky, fixed)
       - 400-600: Overlays and modals
       - 700-900: Floating elements (tooltips, toasts)
       - 1000+: Critical system-level elements
    */

  /* Content Layering (within components) */
  --z-below: -1; /* Behind normal content (backgrounds) */
  --z-normal: 0; /* Default stacking context */
  --z-raise: 1; /* Slightly raised elements */
  --z-elevated: 2; /* Elevated content within cards */
  --z-highlight: 5; /* Highlighted/featured content */
  --z-local-top: 10; /* Top of local stacking context */
  --z-local-max: 20; /* Maximum local z-index */

  /* UI Elements */
  --z-dropdown: 100; /* Dropdown menus */
  --z-sidebar: 150; /* Sidebar navigation */
  --z-sticky: 200; /* Sticky headers/elements */
  --z-fixed: 300; /* Fixed position elements */

  /* Overlays & Modals */
  --z-overlay: 400; /* Overlay/backdrop for modals */
  --z-modal-backdrop: 450; /* Modal backdrop */
  --z-modal: 500; /* Modal dialogs */
  --z-popover: 600; /* Popovers, dropdown panels */

  /* Floating Elements */
  --z-tooltip: 700; /* Tooltips */
  --z-toast: 800; /* Toast notifications */
  --z-notification: 900; /* Persistent notifications */

  /* System Level */
  --z-offline-banner: 1000; /* Offline/connection banners */
  --z-service-worker: 9999; /* Service worker UI elements */
  --z-max: 10000; /* Maximum z-index (critical overlays) */
  --z-max-plus: 10001; /* Above maximum (rare use) */

  /* ============================================
       BREAKPOINTS
       ============================================ */
  /* Extra Small - Small mobile */
  --breakpoint-xs: 375px;
  --breakpoint-sm: 480px;
  /* Standard breakpoints */
  --breakpoint-md: 640px;
  --breakpoint-lg: 768px;
  --breakpoint-xl: 1024px;
  --breakpoint-2xl: 1280px;
  --breakpoint-3xl: 1536px;

  /* ============================================
       CONTAINER QUERIES (Modern Responsive)
       ============================================ */
  --container-type-inline-size: inline-size;

  /* Container query breakpoints */
  --cq-xs: 320px;
  --cq-sm: 400px;
  --cq-md: 540px;
  --cq-lg: 720px;
  --cq-xl: 960px;
  --cq-2xl: 1200px;

  /* ============================================
       CONTAINER
       ============================================ */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1400px;
  --container-full: 100%;

  /* ============================================
       ASPECT RATIOS
       ============================================ */
  --aspect-video: 16 / 9;
  --aspect-square: 1 / 1;
  --aspect-portrait: 3 / 4;
  --aspect-wide: 21 / 9;

  /* ============================================
       OFFLINE PAGE TOKENS
       ============================================ */
  --offline-color-bg-primary: #0a0e1a;
  --offline-color-text-primary: #f8fafc;
  --offline-color-text-secondary: #94a3b8;
  --offline-color-primary: #06b6d4;
  --offline-color-accent: #8b5cf6;
  --offline-gradient-primary: linear-gradient(135deg, #06b6d4, #8b5cf6);
}

/* ============================================
   THEME VARIANTS
   ============================================ */

/* Light Theme (Admin/Dashboard/Public Pages) */
[data-theme="light"],
.theme-light {
  --color-bg: var(--color-bg-light);
  --color-bg-secondary: var(--color-bg-light-secondary);
  --color-bg-tertiary: var(--color-bg-light-tertiary);
  --color-bg-elevated: var(--color-bg-light-elevated);
  --color-text: var(--color-text-light);
  --color-text-secondary: var(--color-text-light-secondary);
  --color-text-muted: var(--color-text-light-muted);
  --color-border: var(--color-border-light);
  --color-border-hover: var(--color-border-light-hover);
  --focus-ring-shadow: var(--focus-ring-shadow-light);
}

/* Dark Theme (Landing/Auth) */
[data-theme="dark"],
.theme-dark {
  --color-bg: var(--color-bg-dark);
  --color-bg-secondary: var(--color-bg-dark-secondary);
  --color-bg-tertiary: var(--color-bg-dark-tertiary);
  --color-bg-elevated: var(--color-bg-dark-elevated);
  --color-text: var(--color-text-dark);
  --color-text-secondary: var(--color-text-dark-secondary);
  --color-text-muted: var(--color-text-dark-muted);
  --color-border: var(--color-border-dark);
  --color-border-hover: var(--color-border-dark-hover);
  --focus-ring-shadow: var(--focus-ring-shadow-dark);
}

/* Default to dark theme for landing/auth pages */
body.auth-page,
body.landing-page {
  --color-bg: var(--color-bg-dark);
  --color-bg-secondary: var(--color-bg-dark-secondary);
  --color-bg-tertiary: var(--color-bg-dark-tertiary);
  --color-text: var(--color-text-dark);
  --color-text-secondary: var(--color-text-dark-secondary);
  --color-text-muted: var(--color-text-dark-muted);
  --color-border: var(--color-border-dark);
  --focus-ring-shadow: var(--focus-ring-shadow-dark);
}

/* Default to DARK theme for admin/dashboard pages (glassmorphic dark theme) */
body.admin-page,
body.dashboard-page {
  --color-bg: var(--color-bg-dark);
  --color-bg-secondary: var(--color-bg-dark-secondary);
  --color-bg-tertiary: var(--color-bg-dark-tertiary);
  --color-bg-elevated: var(--color-bg-dark-elevated);
  --color-text: var(--color-text-dark);
  --color-text-secondary: var(--color-text-dark-secondary);
  --color-text-muted: var(--color-text-dark-muted);
  --color-border: var(--color-border-dark);
  --focus-ring-shadow: var(--focus-ring-shadow-dark);
}