/* ===========================================================
   TRAISR — design tokens
   Light tokens at :root; dark-mode overrides at :root[data-theme="dark"].
   This file must load BEFORE site.css so components can resolve var() refs.
   =========================================================== */

:root {
  /* Palette — cooler editorial cream + navy */
  --paper:        #F5F2EB;
  --paper-warm:   #EFE9DC;
  --cream:        #F5F2EB;
  --cream-mute:   rgba(245, 242, 235, 0.62);

  --navy:         #0D1626;
  --navy-deep:    #08101B;
  --navy-soft:    #1E2A40;

  /* Accent system — Deep Sapphire — readable in every context:
       --accent       = primary editorial sapphire. #2F4B86 on cream ≈ 8:1 (AAA pass).
                        Calmer and more premium than the previous bright blue; reads
                        cleanly on cream and ties into the deep-navy footer.
       --accent-text  = deeper sapphire for small text uses (#243A6B), tuned separately.
       --teal-soft    = lighter sapphire (#93A8D4) used only on the dark hero bg.
  */
  --accent:       #2F4B86;
  --accent-text:  #243A6B;
  --teal:         #2F4B86;
  --teal-deep:    #1F3566;
  --teal-soft:    #93A8D4;

  --ink:          #1A2238;
  --ink-mute:     #4A5670;
  --ink-soft:     #6E7A94;
  --ink-onnavy:   #E8EBF0;

  --line:         rgba(13, 22, 38, 0.12);
  --line-strong:  rgba(13, 22, 38, 0.24);
  --line-inset:   rgba(13, 22, 38, 0.08);

  --gold:         #C8A24B;
  --rose-mute:    #B96B5E;
  --green-active: #1F7A3F;

  /* Typography system */
  --font-display: 'Fraunces', 'Tiempos Headline', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --type-eyebrow:     11px;
  --type-eyebrow-sm:  10px;
  --type-display-lg:  72px;
  --type-display-md:  48px;
  --type-display-sm:  36px;
  --type-body:        18px;
  --type-body-mobile: 16px;

  --tracking-eyebrow: 0.15em;
  --tracking-display: -0.02em;

  /* Section vertical padding — locked scale */
  --section-y:       128px;
  --section-y-tab:   80px;
  --section-y-mob:   64px;

  /* Semantic aliases — additive layer that maps the existing brand tokens to
     industry-standard semantic names. Both forms resolve to the same value,
     so old and new code coexist. Dark-mode handled automatically because each
     alias references a token that already flips under [data-theme="dark"]. */
  --color-bg-page:        var(--paper);
  --color-bg-surface:     var(--paper);
  --color-bg-elevated:    var(--paper-warm);
  --color-bg-inverse:     var(--navy-deep);
  --color-text-primary:   var(--ink);
  --color-text-secondary: var(--ink-mute);
  --color-text-muted:     var(--ink-soft);
  --color-text-onnavy:    var(--ink-onnavy);
  --color-border-default: var(--line);
  --color-border-strong:  var(--line-strong);
  --color-border-inset:   var(--line-inset, rgba(13, 22, 38, 0.08));
  --color-accent-default: var(--accent);
  --color-accent-text:    var(--accent-text);
  --color-accent-soft:    var(--teal-soft);
  --color-success:        var(--green-active);
  --color-warning:        var(--gold);
  --color-danger:         var(--rose-mute);
}
@media (max-width: 1024px) { :root { --section-y: var(--section-y-tab); } }
@media (max-width: 600px)  { :root { --section-y: var(--section-y-mob); } }

/* ----- Dark-mode token overrides ----- */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:        #0B1A2D;
  --paper-warm:   #102339;
  --cream:        #F7F2E9;
  --cream-mute:   rgba(247, 242, 233, 0.62);
  --navy:         #E8E6DD;
  --navy-deep:    #04101D;
  --navy-soft:    #2C5A8F;
  --accent:       #5DC1E8;
  --accent-text:  #82D0F0;
  --teal:         #5DC1E8;
  --teal-deep:    #2BA8D9;
  --teal-soft:    #82D0F0;
  --ink:          #E8E6DD;
  --ink-mute:     #A2B3C9;
  --ink-soft:     #7E94AC;
  --line:         rgba(245, 240, 232, 0.09);
  --line-strong:  rgba(245, 240, 232, 0.20);
  --gold:         #D4B568;
  --rose-mute:    #C97D72;
  --green-active: #3FA15F;
}