/* ============================================================
   TRUE NORTH — DESIGN TOKEN SYSTEM v2
   tokens.css | Brand DNA: colors, typography, spacing, motion
   Rebuild: April 2026
   ============================================================ */

:root {

  /* ═══ COLORS ═══ */

  /* Navy — Trust, Depth, Authority */
  --color-navy-950: #040D1A;
  --color-navy-900: #071428;
  --color-navy-800: #0C1E3D;
  --color-navy-700: #112952;
  --color-navy-600: #163566;
  --color-navy-500: #1B427A;

  /* Gold — Prosperity, Confidence, Premium */
  --color-gold-200: #F5E8B8;
  --color-gold-300: #F0D98A;
  --color-gold-400: #E8C96A;
  --color-gold-500: #D4A935;
  --color-gold-600: #B8901E;
  --color-gold-700: #9A7818;

  /* Emerald — Growth, CTA, Action */
  --color-emerald-300: #6EE7B7;
  --color-emerald-400: #34D399;
  --color-emerald-500: #10B981;
  --color-emerald-600: #059669;
  --color-emerald-glow: rgba(16, 185, 129, 0.25);

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-off-white: #F8F9FC;
  --color-gray-50:  #F9FAFB;
  --color-gray-100: #EEF0F5;
  --color-gray-200: #D8DCE8;
  --color-gray-300: #B8BECE;
  --color-gray-400: #8A93A8;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-charcoal: #1F2937;

  /* Semantic */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;
  --color-info:    #3B82F6;

  /* Glass / Overlay */
  --color-glass-light:  rgba(255, 255, 255, 0.06);
  --color-glass-medium: rgba(255, 255, 255, 0.10);
  --color-glass-border: rgba(255, 255, 255, 0.10);
  --color-glass-hover:  rgba(255, 255, 255, 0.12);
  --color-overlay-dark: rgba(4, 13, 26, 0.7);
  --color-overlay-navy: rgba(7, 20, 40, 0.85);

  /* ═══ GRADIENTS ═══ */
  --gradient-hero:         linear-gradient(145deg, var(--color-navy-950) 0%, var(--color-navy-800) 40%, #0A1F45 100%);
  --gradient-card:         linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  --gradient-card-hover:   linear-gradient(145deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
  --gradient-gold:         linear-gradient(135deg, var(--color-gold-300) 0%, var(--color-gold-500) 100%);
  --gradient-emerald:      linear-gradient(135deg, var(--color-emerald-400) 0%, var(--color-emerald-600) 100%);
  --gradient-section-dark: linear-gradient(180deg, var(--color-navy-900) 0%, var(--color-navy-950) 100%);
  --gradient-section-mid:  linear-gradient(180deg, #0A1830 0%, var(--color-navy-900) 100%);
  --gradient-text-gold:    linear-gradient(135deg, var(--color-gold-300) 0%, var(--color-gold-500) 60%, var(--color-gold-400) 100%);
  --gradient-cta:          linear-gradient(135deg, var(--color-emerald-500) 0%, var(--color-emerald-600) 100%);
  --gradient-cta-hover:    linear-gradient(135deg, var(--color-emerald-400) 0%, var(--color-emerald-500) 100%);

  /* ═══ TYPOGRAPHY ═══ */

  /* Font Families — Self-hosted woff2 in production */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  --font-label:   'Montserrat', sans-serif;

  /* Type Scale */
  --text-2xs: 0.625rem;    /* 10px */
  --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 */
  --text-8xl: 6rem;        /* 96px */

  /* Weight */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* Line Height */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

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

  /* ═══ SPACING ═══ */
  --space-px: 1px;
  --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 */
  --space-32: 8rem;      /* 128px */
  --space-40: 10rem;     /* 160px */

  /* ═══ LAYOUT ═══ */
  --container-max:    1280px;
  --container-wide:   1440px;
  --container-narrow: 900px;
  --container-text:   720px;
  --container-tight:  560px;

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

  /* ═══ SHADOWS ═══ */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.5);
  --shadow-xl:      0 16px 64px rgba(0,0,0,0.6);
  --shadow-gold:    0 0 30px rgba(212, 169, 53, 0.25);
  --shadow-emerald: 0 0 30px rgba(16, 185, 129, 0.2);
  --shadow-card:    0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  --shadow-nav:     0 2px 20px rgba(0,0,0,0.5);
  --shadow-glow-gold: 0 0 40px rgba(212, 169, 53, 0.15), 0 0 80px rgba(212, 169, 53, 0.05);
  --shadow-glow-emerald: 0 0 40px rgba(16, 185, 129, 0.15), 0 0 80px rgba(16, 185, 129, 0.05);

  /* ═══ BORDERS ═══ */
  --border-glass:   1px solid var(--color-glass-border);
  --border-gold:    1px solid rgba(212, 169, 53, 0.3);
  --border-emerald: 1px solid rgba(16, 185, 129, 0.3);
  --border-subtle:  1px solid rgba(255,255,255,0.06);
  --border-error:   1px solid rgba(239, 68, 68, 0.5);

  /* ═══ MOTION ═══ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout:  cubic-bezier(0.83, 0, 0.17, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;
  --duration-slower:  800ms;

  /* ═══ Z-INDEX ═══ */
  --z-behind:   -1;
  --z-base:     1;
  --z-above:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}