/* tokens.css — design system variables (mirrors docs/DESIGN_TOKENS.md) */
:root {
  /* Colors — Navy / Slate */
  --c-navy-950: #0B1530;
  --c-navy-900: #0F1C3F;
  --c-navy-800: #1E293B;
  --c-slate-700: #334155;
  --c-slate-500: #64748B;
  --c-slate-300: #CBD5E1;
  --c-slate-100: #F1F5F9;
  --c-soft-white: #F8FAFC;
  --c-white: #FFFFFF;

  /* Colors — Blue */
  --c-blue-700: #1D4ED8;
  --c-blue-600: #2563EB;
  --c-blue-500: #3B82F6;
  --c-blue-100: #DBEAFE;

  /* Semantic */
  --c-bg: var(--c-white);
  --c-bg-alt: var(--c-soft-white);
  --c-bg-dark: var(--c-navy-950);
  --c-text: var(--c-navy-900);
  --c-text-muted: var(--c-slate-500);
  --c-text-on-dark: var(--c-white);
  --c-border: var(--c-slate-300);
  --c-primary: var(--c-blue-600);
  --c-primary-hover: var(--c-blue-700);
  --c-accent: var(--c-blue-500);

  /* Gradients — richer, multi-stop */
  --g-hero: radial-gradient(1100px 600px at 12% 10%, rgba(59, 130, 246, 0.28) 0%, transparent 60%),
            radial-gradient(900px 500px at 90% 90%, rgba(99, 102, 241, 0.22) 0%, transparent 60%),
            linear-gradient(135deg, #060B1F 0%, #0B1530 40%, #0F1C3F 70%, #15296B 100%);
  --g-cta:  linear-gradient(120deg, #3B82F6 0%, #1D4ED8 40%, #0F1C3F 100%);
  --g-strip: linear-gradient(180deg, #0F1C3F 0%, #0B1530 100%);
  --g-text: linear-gradient(135deg, #FFFFFF 0%, #DBEAFE 50%, #93C5FD 100%);
  --g-text-accent: linear-gradient(135deg, #60A5FA 0%, #3B82F6 50%, #1D4ED8 100%);
  --g-btn-primary: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  --g-btn-primary-hover: linear-gradient(135deg, #60A5FA 0%, #2563EB 100%);
  --g-section-alt: linear-gradient(180deg, #F8FAFC 0%, #EEF2F8 100%);
  --g-card-glow: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(29, 78, 216, 0.05) 100%);

  /* Typography — bigger, bolder, modern */
  --ff-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ff-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fs-display: clamp(2.75rem, 6.5vw, 4.75rem); /* up to 76px */
  --fs-h1: clamp(2.5rem, 5.5vw, 4rem);          /* 40–64px */
  --fs-h2: clamp(2rem, 3.6vw, 2.875rem);         /* 32–46px */
  --fs-h3: clamp(1.375rem, 2vw, 1.625rem);       /* 22–26px */
  --fs-h4: 1.25rem;
  --fs-lead: clamp(1.0625rem, 1.4vw, 1.25rem);   /* 17–20px */
  --fs-body: 1.0625rem;                           /* 17px */
  --fs-sm: 0.9375rem;                             /* 15px */
  --fs-xs: 0.8125rem;                             /* 13px */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.7;
  --ls-tight: -0.025em;
  --ls-tighter: -0.04em;
  --ls-wide: 0.02em;

  /* Spacing (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px;
  --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* Layout */
  --container-max: 1200px;
  --container-px: clamp(1rem, 4vw, 2rem);

  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px;
  --r-full: 9999px;

  /* Shadows — layered for depth */
  --sh-1: 0 1px 2px rgba(15, 28, 63, 0.06), 0 1px 1px rgba(15, 28, 63, 0.04);
  --sh-2: 0 4px 12px rgba(15, 28, 63, 0.08), 0 2px 4px rgba(15, 28, 63, 0.04);
  --sh-3: 0 18px 40px -8px rgba(15, 28, 63, 0.18), 0 8px 16px -4px rgba(15, 28, 63, 0.08);
  --sh-4: 0 30px 60px -12px rgba(15, 28, 63, 0.25), 0 18px 36px -18px rgba(15, 28, 63, 0.22);
  --sh-blue: 0 18px 36px -10px rgba(37, 99, 235, 0.45), 0 8px 16px -6px rgba(29, 78, 216, 0.25);
  --sh-blue-hover: 0 26px 50px -10px rgba(37, 99, 235, 0.55), 0 12px 24px -8px rgba(29, 78, 216, 0.35);
  --sh-inset-glow: inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* Transitions */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 400ms ease;

  /* Z */
  --z-base: 1; --z-dropdown: 20; --z-header: 50; --z-modal: 100; --z-toast: 200;

  /* Components */
  --header-h: 72px;
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }
}

/* Dark Mode Support (prefers-color-scheme: dark) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Backgrounds — invert to dark */
    --c-bg: #0F1419;           /* Near-black dark background */
    --c-bg-alt: #1A1F2B;       /* Slightly lighter dark alt */
    --c-bg-dark: #050A12;      /* Darkest background */

    /* Text — invert to light */
    --c-text: #E8EAED;         /* Light text on dark */
    --c-text-muted: #9CA3AF;   /* Muted text (slate) */
    --c-text-on-dark: #F3F4F6; /* Very light text */

    /* Borders — lighter for visibility */
    --c-border: #374151;       /* Visible border in dark */

    /* Headings — use light colors */
    --c-navy-950: #E8EAED;
    --c-navy-900: #F3F4F6;
    --c-navy-800: #D1D5DB;
    --c-slate-700: #D1D5DB;
    --c-slate-500: #9CA3AF;
    --c-slate-300: #4B5563;
    --c-slate-100: #1F2937;
    --c-soft-white: #1A1F2B;
    --c-white: #0F1419;

    /* Blue tones — adjusted for dark mode */
    --c-blue-700: #60A5FA;
    --c-blue-600: #3B82F6;
    --c-blue-500: #2563EB;
    --c-blue-100: #1E3A8A;

    /* Semantic adjustments */
    --c-primary: #60A5FA;
    --c-primary-hover: #93C5FD;
    --c-accent: #3B82F6;

    /* Gradients — dark-friendly */
    --g-hero: radial-gradient(1100px 600px at 12% 10%, rgba(59, 130, 246, 0.15) 0%, transparent 60%),
              radial-gradient(900px 500px at 90% 90%, rgba(99, 102, 241, 0.12) 0%, transparent 60%),
              linear-gradient(135deg, #0F1419 0%, #1A1F2B 40%, #050A12 70%, #000000 100%);
    --g-cta: linear-gradient(120deg, #60A5FA 0%, #3B82F6 40%, #1E3A8A 100%);
    --g-strip: linear-gradient(180deg, #1A1F2B 0%, #0F1419 100%);
    --g-text: linear-gradient(135deg, #F3F4F6 0%, #93C5FD 50%, #60A5FA 100%);
    --g-text-accent: linear-gradient(135deg, #93C5FD 0%, #60A5FA 50%, #3B82F6 100%);
    --g-btn-primary: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
    --g-btn-primary-hover: linear-gradient(135deg, #93C5FD 0%, #60A5FA 100%);
    --g-section-alt: linear-gradient(180deg, #1A1F2B 0%, #151B28 100%);
    --g-card-glow: linear-gradient(135deg, rgba(96, 165, 250, 0.12) 0%, rgba(59, 130, 246, 0.05) 100%);

    /* Shadows — adjusted for dark mode */
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);
    --sh-2: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
    --sh-3: 0 18px 40px -8px rgba(0, 0, 0, 0.5), 0 8px 16px -4px rgba(0, 0, 0, 0.3);
    --sh-4: 0 30px 60px -12px rgba(0, 0, 0, 0.6), 0 18px 36px -18px rgba(0, 0, 0, 0.4);
    --sh-blue: 0 18px 36px -10px rgba(59, 130, 246, 0.3), 0 8px 16px -6px rgba(37, 99, 235, 0.2);
    --sh-blue-hover: 0 26px 50px -10px rgba(96, 165, 250, 0.4), 0 12px 24px -8px rgba(59, 130, 246, 0.25);
    --sh-inset-glow: inset 0 1px 0 rgba(0, 0, 0, 0.3);
  }
}