/* ═════════════════════════════════════════════════════════════════════
   tokens.css · Design-system tokens
   Light mode default. Dark via [data-theme="dark"].

   Day-34 retune:
   - Wider luminance delta between bg / surface / surf2 so cards float.
   - Mono letter-spacing dialed back from 0.18em → 0.06em (legibility).
   - Type scale unified: 12 / 14 / 16 / 20 / 24 / 32 / 44.
═════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces & ink — Day-59 navy theme (Field app) ──────────────── */
  /* Inverted from the original cream palette. The page background is
     the deepest navy (close to --accent), and surfaces step lighter
     so cards still "float" against the page. Ink is cream so type
     stays legible across all surface layers. */
  --bg:        #0A1226;          /* page background (deepest) */
  --surface:   #142039;          /* cards / sheets */
  --surf2:     #1E2C49;          /* hover / nested */
  --surf3:     #28385A;          /* active / heavy */
  --border:    rgba(255, 255, 255, 0.14);
  --border-soft: rgba(255, 255, 255, 0.08);
  --ink:       #F5EFE3;          /* cream text on navy */
  --muted:     rgba(245, 239, 227, 0.62);

  /* ── Brand ──────────────────────────────────────────────────────── */
  --accent:        #0E1B35;
  --accent-2:      #1A2747;
  --accent-soft:   rgba(14, 27, 53, 0.32);
  --accent-fg:     #F5EFE3;
  --gold:          #D4B872;      /* slightly brighter for navy bg */
  --gold-soft:     #C9A557;
  --gold-deep:     #A0823E;
  --gold-bg:       rgba(212, 184, 114, 0.10);
  --gold-bg-2:     rgba(212, 184, 114, 0.18);

  /* ── Semantic — bumped lightness so they read on navy ───────────── */
  --green:         #4FAE7A;
  --green-soft:    rgba(79, 174, 122, 0.14);
  --green-line:    rgba(79, 174, 122, 0.36);
  --green-bg-band: #1E3A2A;
  --red:           #E07A6F;
  --red-soft:      rgba(224, 122, 111, 0.12);
  --red-line:      rgba(224, 122, 111, 0.36);
  --blue:          #7AA0D8;
  --blue-soft:     rgba(122, 160, 216, 0.14);
  --blue-line:     rgba(122, 160, 216, 0.36);

  /* ── On-navy palette (still used by .navy-band & QR modal) ──────── */
  --on-navy:        rgba(255, 255, 255, 0.94);
  --on-navy-dim:    rgba(255, 255, 255, 0.72);
  --on-navy-faint:  rgba(255, 255, 255, 0.48);
  --on-navy-bg:     rgba(255, 255, 255, 0.06);
  --on-navy-bg-2:   rgba(255, 255, 255, 0.12);
  --on-navy-bg-3:   rgba(255, 255, 255, 0.18);
  --on-navy-border: rgba(255, 255, 255, 0.12);

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Letter-spacing presets — mono no longer tracked into oblivion. */
  --tracking-mono:       0.06em;
  --tracking-mono-tight: 0.04em;
  --tracking-mono-wide:  0.08em;
  --tracking-tight:      -0.015em;
  --tracking-tighter:    -0.02em;

  /* ── Type scale (canonical) ─────────────────────────────────────── */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-md:   16px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;

  /* ── Spacing (4-pt grid) ────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;

  /* ── Radii ──────────────────────────────────────────────────────── */
  --r-sm:    6px;
  --r:       10px;
  --r-lg:    14px;
  --r-xl:    18px;
  --r-2xl:   22px;
  --r-pill:  999px;

  /* ── Shadows (light) ────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(20, 22, 28, 0.05);
  --shadow-2: 0 1px 2px rgba(20, 22, 28, 0.05), 0 4px 12px rgba(20, 22, 28, 0.06);
  --shadow-3: 0 1px 2px rgba(20, 22, 28, 0.06), 0 12px 28px rgba(20, 22, 28, 0.09);
  --shadow-4: 0 8px 32px rgba(20, 22, 28, 0.12);
  --shadow-navy: 0 6px 20px rgba(14, 27, 53, 0.12);

  /* ── Motion ─────────────────────────────────────────────────────── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:    cubic-bezier(0.32, 0.72, 0, 1);

  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 320ms;
}

html[data-theme="dark"] {
  --bg:        #0B0F15;
  --surface:   #161B23;
  --surf2:     #1E242E;
  --surf3:     #2A313C;
  --border:    #2F3845;
  --border-soft: rgba(47, 56, 69, 0.55);
  --ink:       #ECE7DA;
  --muted:     #9C937F;

  --accent:    #1A2747;
  --accent-2:  #2A3A60;
  --accent-soft: rgba(59, 90, 138, 0.12);
  --accent-fg: #8DA9DD;
  --gold:      #D4B872;
  --gold-soft: #E2CB90;
  --gold-deep: #B89951;
  --gold-bg:   rgba(212, 184, 114, 0.10);
  --gold-bg-2: rgba(212, 184, 114, 0.18);

  --green:     #4DAA7C;
  --green-soft:rgba(77, 170, 124, 0.12);
  --green-line:rgba(77, 170, 124, 0.32);
  --green-bg-band: #1B2A22;
  --red:       #D4625A;
  --red-soft:  rgba(212, 98, 90, 0.10);
  --red-line:  rgba(212, 98, 90, 0.32);
  --blue:      #6B8AB8;
  --blue-soft: rgba(107, 138, 184, 0.12);
  --blue-line: rgba(107, 138, 184, 0.32);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.20), 0 4px 12px rgba(0, 0, 0, 0.30);
  --shadow-3: 0 1px 2px rgba(0, 0, 0, 0.25), 0 12px 28px rgba(0, 0, 0, 0.35);
  --shadow-4: 0 8px 32px rgba(0, 0, 0, 0.40);
  --shadow-navy: 0 6px 20px rgba(0, 0, 0, 0.40);
}

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}