/* ==========================================================
   💎 MASTER DESIGN TOKENS — tokens.css (v3.0)
   - Framework: Isomorphic Semantic Scaling (ISS)
   - Architecture: Primitives -> Semantics
   - Optimization: Zero-Jank, GPU-Ready, Brand-Aligned
========================================================== */

:root {
  /* =========================================
     1. BRAND PRIMITIVES (The Raw DNA)
     Single source of truth for Hex codes.
     ========================================= */

  /* Brand Core */
  --brand-navy: #0b2a4a; /* Deep Trustworthy Navy */
  --brand-yellow: #ffd400; /* Energetic Accent */
  --brand-red: #ef4444; /* Alert / Sale */

  /* Neutrals (OLED Safe Slate Scale) */
  --neutral-white: #ffffff;
  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-600: #475569;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a; /* Almost Black */

  /* Functional Colors */
  --state-success: #10b981;
  --state-error: #ef4444;
  --state-info: #3b82f6;

  /* =========================================
     2. SEMANTIC ALIASES (Usage Layers)
     This maps raw colors to UI roles.
     ========================================= */

  /* Identity Mapping */
  --logo-blue: var(--brand-navy);
  --logo-yellow: var(--brand-yellow);
  --accent-red: var(--brand-red);

  /* UI Surfaces */
  --bg-page: var(--neutral-white);
  --bg-surface: var(--neutral-50);
  --bg-surface-hover: var(--neutral-100);
  --border-light: var(--neutral-200);

  /* Text Hierarchy (Contrast Compliant) */
  --text-main: var(--neutral-900); /* Headings */
  --text-body: #64748b; /* Readable Paragraph Gray */
  --text-muted: var(--neutral-400); /* Meta data */
  --text-inverse: var(--neutral-white);

  /* Special Background Tints */
  --tint-ocean: #f0f9ff;
  --tint-warm: #fffbeb;
  --tint-mint: #f0fdf4;

  /* =========================================
     3. TYPOGRAPHY ENGINE (Performance Optimized)
     Matches your HTML <link> tags perfectly.
     ========================================= */

  --font-display: "Playfair Display", serif;
  --font-body: "Poppins", system-ui, -apple-system, sans-serif;

  /* Fluid Scale (Mobile -> Desktop) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.3vw, 0.95rem);
  --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);

  /* Display Scale */
  --text-xl: clamp(1.5rem, 4vw, 2.25rem);
  --text-2xl: clamp(2rem, 5vw, 3rem);
  --text-hero: clamp(2.5rem, 8vw, 4.5rem);

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* =========================================
     4. SPACING & LAYOUT (Isomorphic)
     Mathematical balance for visual rhythm.
     ========================================= */

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* Safe Area Containers */
  --container-width: 1200px;
  --header-height: clamp(70px, 8vh, 90px);
  --section-pad: clamp(4rem, 8vw, 7rem);

  /* =========================================
     5. DEPTH & GLASSMORPHISM (World Class UI)
     Layered shadows for premium feel.
     ========================================= */

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md:
    0 10px 15px -3px rgba(15, 23, 42, 0.08),
    0 4px 6px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
  --shadow-float: 0 20px 40px rgba(11, 42, 74, 0.12);

  /* Glass Effects (Backdrop Filters) */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-blur: blur(12px) saturate(180%);

  /* =========================================
     6. BORDER RADIUS (The Smooth Factor)
     ========================================= */

  --radius-sm: 8px;
  --radius-md: 14px; /* Standard UI elements */
  --radius-lg: 24px; /* Cards */
  --radius-xl: 32px; /* Hero / Large sections */
  --radius-full: 9999px;

  /* =========================================
     7. ANIMATION & TIMING (GPU Optimized)
     Spring physics for natural interaction.
     ========================================= */

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 200ms;
  --dur-normal: 400ms;
  --dur-slow: 800ms;

  /* =========================================
     8. Z-INDEX LAYERS (Stacking Context Map)
     Prevents "z-index: 99999" wars.
     ========================================= */

  --z-negative: -1;
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 2000;
}

/* =========================================
   9. PREFERENCES & MODES
   ========================================= */

/* Dark Mode (Prepared but opt-in to prevent breaking light-only designs) */
@media (prefers-color-scheme: dark) {
  :root {
    /* NOTE: We are NOT automatically overriding colors here yet 
       because the Home Design is strictly Light Mode (White/Blue).
       Use specific classes like .dark-mode to activate these in future.
    */
    --bg-page-dark: var(--neutral-900);
    --text-main-dark: var(--neutral-50);
  }
}

/* Reduced Motion (Accessibility Mandatory) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-normal: 0ms;
    --dur-slow: 0ms;
  }
}