/* ============================================================================
   tokens.css
   Design tokens grounded in psychology research. See
   docs/superpowers/specs/2026-05-04-tsc-psych-redesign-design.md for citations.

   Background is warm parchment, not white. Pure white glares for older eyes.
   Pure black hurts contrast for 40+ readers (S-cone acuity loss).
   Body text on parchment is 12.91:1 contrast (WCAG AAA, with cushion).
   Terracotta CTA fills with white text only — the hex 4.10:1 isn't safe for body.
   ============================================================================ */

:root {
  /* surfaces */
  --paper:        #F5EFE6; /* warm parchment background, no glare */
  --paper-2:      #EBE3D4; /* alternating section bands */
  --paper-3:      #E1D7C2; /* deeper paper, used sparingly */
  --card:         #FBF8F3; /* lifted card surface */
  --rule:         #D9CFBE; /* hairline border */
  --rule-2:       #C7B999; /* heavier border */

  /* text (charcoal, not pure black) */
  --ink:          #1F2933; /* body + headlines, 12.91:1 on paper, AAA */
  --ink-2:        #3A4654; /* secondary text, ~8.5:1, AAA */
  --mute:         #6B7480; /* meta, captions; only at >=18.66px bold */

  /* brand authority */
  --navy:         #0E2A47; /* primary brand, 12.75:1 on paper, AAA */
  --navy-2:       #1B3A5C; /* hover navy */
  --navy-deep:    #081A2D; /* deepest navy, used in the navy emphasis band */

  /* CTA + warmth (terracotta family) */
  --terracotta:       #C2502B; /* CTA fill — pair only with white text */
  --terracotta-text:  #A03F1E; /* terracotta as text on paper, ~5.5:1 */
  --terracotta-2:     #8E3417; /* hover */
  --terracotta-soft:  #F2E0D5; /* terracotta wash band background */

  /* proof + money (refined gold) */
  --gold:        #B8862F; /* large display use */
  --gold-text:   #7E5A19; /* gold as text on paper, ~6.9:1 */
  --gold-soft:   #F6E9C9; /* gold wash band */

  /* trust + verified (forest) */
  --forest:      #2F5D3A; /* SDVOSB badge, verified marks, ~7.5:1, AAA */
  --forest-text: #244A2D;
  --forest-soft: #E0EAD9;

  /* signals */
  --ok:    #2F5D3A;
  --warn:  #B8862F;
  --err:   #9B2C1F;

  /* type families */
  --f-display: 'Fraunces', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono:    'IBM Plex Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* type sizes (40-62 floor: body 18px, line-height 1.6) */
  --t-base:    1.125rem;   /* 18px body */
  --t-sm:      1rem;       /* 16px secondary body */
  --t-xs:      0.875rem;   /* 14px micro labels only */
  --t-h3:      clamp(1.375rem, 1.15rem + 1.0vw, 1.75rem);   /* 22-28px */
  --t-h2:      clamp(1.75rem, 1.35rem + 1.7vw, 2.625rem);   /* 28-42px */
  --t-h1:      clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);     /* 36-60px */
  --t-display: clamp(2.75rem, 2rem + 3.6vw, 4.5rem);        /* hero overrides */

  /* line-heights */
  --lh-body:    1.6;
  --lh-tight:   1.45;
  --lh-display: 1.15;

  /* measure (line length) */
  --measure:    65ch;
  --measure-sm: 52ch;
  --measure-lg: 78ch;

  /* spacing scale */
  --s0: 0;
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s7: 2rem;
  --s8: 2.5rem;
  --s9: 3rem;
  --s10: 4rem;
  --s11: 5rem;
  --s12: 6rem;
  --s13: 8rem;
  --s14: 10rem;

  /* tap + form (40-62 ergonomics floor) */
  --tap:        48px;
  --tap-gap:    8px;
  --field:      56px;
  --field-pad:  14px 16px;

  /* radii: warm but understated */
  --r1: 4px;
  --r2: 8px;
  --r3: 12px;
  --r-pill: 9999px;

  /* motion */
  --ease-quick: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:     180ms;
  --t-base-mo:  280ms;

  /* z layers */
  --z-base:    0;
  --z-content: 10;
  --z-nav:     1000;
  --z-modal:   5000;
  --z-overlay: 9000;

  /* layout caps */
  --cap-sm: 720px;
  --cap-md: 960px;
  --cap-lg: 1200px;
  --cap-xl: 1320px;

  color-scheme: light;
}

/* prefers-reduced-motion: kill everything */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0s;
    --t-base-mo: 0s;
  }
}

/* prefers-contrast more: stronger borders, deeper text */
@media (prefers-contrast: more) {
  :root {
    --rule: #B8AC93;
    --rule-2: #897D5F;
    --ink-2: #2A3441;
  }
}