/* ============================================================
   TrueMetriks - Design Tokens
   Single source of truth for colors, typography, spacing, etc.
   Light theme at :root. Dark theme override at [data-theme="dark"].
   ============================================================ */

:root {
  /* --- BRAND --- */
  --color-brand:        #2233FF;
  --color-brand-hover:  #1A2BD9;
  --color-brand-deep:   #0B0B47;

  /* --- PERIWINKLE WASH (light theme section chain) ---
     Tint-1 = pure white (cards, hero top). Tint-5 = deepest visible periwinkle.
     Each section's bottom matches the next section's top (see home.css chain). */
  --surface-tint-1:     #FFFFFF;
  --surface-tint-2:     #F0F3FF;
  --surface-tint-3:     #E1E6FF;
  --surface-tint-4:     #CFD6FF;
  --surface-tint-5:     #BCC5FF;

  /* --- SURFACES (light) --- */
  --color-bg:           var(--surface-tint-2);
  --color-surface:      var(--surface-tint-1);
  --color-surface-alt:  var(--surface-tint-3);
  --color-border:       #D5DAEB;
  --color-border-strong:#B7BFE0;

  /* --- TEXT (light) ---
     Tightened on 2026-05-11: muted/subtle were Tailwind gray-500/400 which
     wash out against the periwinkle bg. Now darker slate, still hierarchical. */
  --color-text:         #0F0F0F;
  --color-text-muted:   #2E3340;
  --color-text-subtle:  #4B5160;
  --color-text-inverse: #FAFAFA;
  --color-text-link:    var(--color-brand);
  --color-text-on-brand:#FFFFFF;

  /* --- BRAND GRADIENT + EXTRAS --- */
  --color-brand-2:        #5C82FF;
  --color-eyebrow:        var(--color-brand-2);

  /* Red accent (checkout CTA, destructive actions). Checkout page only; light-only context. */
  --color-accent-red:         #DC2626;
  --color-accent-red-hover:   #B91C1C;

  /* Checkout page - specific surface tokens (light-only; checkout is forced light) */
  --color-trust-band:    #09051E;  /* very dark navy for trust strip header background */
  --color-checkout-body: #F3F4F6;  /* neutral light gray for checkout page background */

  /* Amber accent (warm contrast to the brand-blue family). Used on the
     dark-mode eyebrow, the dark-mode grad-text headline highlight, and
     the hero primary CTA. Trial 2026-05-12 per Fahir's reference page. */
  --color-accent-amber:       #fab73e;
  --color-accent-amber-light: #ffd271;
  --color-accent-amber-deep:  #e09e2c;
  --gradient-amber:           linear-gradient(135deg, #fab73e 0%, #e09e2c 100%);
  --shadow-amber:             0 20px 60px -20px rgba(250, 183, 62, 0.45);

  /* Link colors for body content (blog, legal, etc.). Light theme uses
     the brand-blue family. Dark theme overrides to a brighter periwinkle
     so links read against the navy wash instead of blending in. */
  --color-link-bright:       var(--color-brand);
  --color-link-bright-hover: var(--color-brand-hover);

  /* Variant for links sitting on elevated surface backgrounds (tint-1 /
     tint-2 in dark, which are purplish enough that --color-link-bright
     still blends). Light theme: same as --color-link-bright. Dark theme:
     near-white with a hint of periwinkle. */
  --color-link-on-surface:       var(--color-link-bright);
  --color-link-on-surface-hover: var(--color-link-bright-hover);
  --gradient-brand:       linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 100%);
  --gradient-brand-soft:  linear-gradient(135deg, rgba(34, 51, 255, 0.18), rgba(92, 130, 255, 0.10));
  --gradient-brand-glow:  radial-gradient(800px 400px at 50% -20%, rgba(34, 51, 255, 0.35), transparent 60%);
  --shadow-brand:         0 20px 60px -20px rgba(34, 51, 255, 0.45);

  /* --- STATE (theme-independent) --- */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger:  #EF4444;

  /* --- SPACING (4px base) --- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* --- TYPOGRAPHY --- */
  --font-family-base: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --font-size-xs:   12px;
  --font-size-sm:   14px;
  --font-size-base: 18px;
  --font-size-lg:   18px;
  --font-size-blog-body: 19px;
  --font-size-blog-lead: 22px;
  --font-size-eyebrow:   15px;
  --font-size-xl:   24px;
  --font-size-2xl:  32px;
  --font-size-3xl:  40px;
  --font-size-4xl:  56px;
  --font-size-5xl:  72px;

  --line-height-tight:   1.1;
  --line-height-snug:    1.3;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.65;

  --font-weight-regular:  400;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extra:    800;

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

  /* --- SHADOWS --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.12);

  /* --- LAYOUT --- */
  --container-narrow: 720px;
  --container-base:   960px;
  --container-wide:   1200px;
  --container-full:   1440px;

  --nav-height: 64px;
  --z-nav:   100;
  --z-modal: 200;

  /* --- MOTION --- */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

[data-theme="dark"] {
  /* Dark navy scale (mirror of light periwinkle scale).
     tint-1 = lifted navy (panels/peaks). tint-5 = deepest near-black.
     Same variable names as light theme so the section chain in home.css
     applies identically; theme-specific values drive the wave.
     Reverted 2026-05-12 to variant (f) blue-violet blend - Fahir confirmed
     "(f) is the closest to what I want" after testing (g) royal-blue.
     History of all variants tested in future_design_notes.md §2. */
  --surface-tint-1:     #33307D;
  --surface-tint-2:     #222062;
  --surface-tint-3:     #151234;
  --surface-tint-4:     #08051E;
  --surface-tint-5:     #030119;

  --color-bg:           var(--surface-tint-4);  /* darker blue body for non-home pages */
  --color-surface:      var(--surface-tint-2);
  --color-surface-alt:  var(--surface-tint-1);
  --color-border:       #252A52;
  --color-border-strong:#363B6E;

  --color-text:         #FAFAFA;
  /* Secondary text near-white in dark mode (was cool gray which read as faded).
     Tiny hierarchy kept so fine-print / captions still feel one notch quieter. */
  --color-text-muted:   #FAFAFA;
  --color-text-subtle:  #D4D4D8;
  --color-text-inverse: var(--surface-tint-3);

  /* Section eyebrow uses the amber accent in dark mode so the section
     labels pop against the blue-violet wash instead of blending with the
     brand-blue family. Trial 2026-05-12; revert is a one-line token edit. */
  --color-eyebrow:      var(--color-accent-amber);

  /* Body-content link override (legal pages, blog post body, TL;DR, etc.):
     the default brand-blue is unreadable against the navy wash. Brighten
     to a periwinkle that pops without losing the link-color signal. */
  --color-link-bright:       #93AFFF;
  --color-link-bright-hover: #DCE4FF;

  /* Links on elevated surfaces (TL;DR aside, author-bio card) need to lift
     further - those surfaces use tint-1 / tint-2 which are still purplish.
     Near-white with a periwinkle tint reads clearly. */
  --color-link-on-surface:       #DCE4FF;
  --color-link-on-surface-hover: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.6);
}