/* =============================================================================
   tokens.css — single source of truth for design tokens on joannaprescott.com.
   Loaded FIRST on every page, before any other stylesheet.

   Direction: Editorial author brand for parents teaching kids about money.
   Warm ivory base (the editorial paper) + bright per-book/structural accents
   (the energy spice). Anti-link-blue: italic emphasis in titles uses the warm
   terracotta accent, never the structural blue.
   ============================================================================= */

/* === COLOR TOKENS === */
:root {
  /* Paper layer — schoolbook butter-cream, dominant.
     Distinct from Ava's pink-neutral cream: a few hue degrees toward warm
     yellow. Reads "fresh schoolbook page in morning light", harmonizes with
     the lemon highlight, and subliminally signals optimism + learning. */
  --paper:           #F9F5E8;                    /* butter cream, the main surface */
  --paper-light:     #FDFAEE;                    /* lighter butter cream */
  --paper-band:      #F1EAD5;                    /* deeper warm cream — rhythm */
  --paper-cool:      #EDF2EA;                    /* pale fresh-mint — rhythm bands (subliminal money/growth) */
  --paper-warm:      #FAEFD0;                    /* warmer butter — alt rhythm */

  /* Ink layer — cool dark on warm paper for "ink on paper" temperature contrast */
  --ink:             #1A2D33;                    /* cool dark, body text */
  --ink-soft:        #4A5E68;                    /* secondary text */
  --ink-deep:        #0E1F25;                    /* deepest dark, headings */

  /* Warm accent — terracotta. Reserved for italic emphasis inside headings.
     Anti-hyperlink-blue (avoids the 90s "visited link" mental cue) and warm
     enough to read as deliberate editorial emphasis on the ivory paper. */
  --warm:            #C8633F;                    /* terracotta */
  --warm-deep:       #8E3F22;                    /* terracotta darker */

  /* Primary energy — electric blue. Used for eyebrows, structural accents,
     the Money 4-7 book accent, and CTAs. Never used inside title <em>. */
  --primary:         #2563EB;                    /* blue-600 */
  --primary-soft:    #60A5FA;                    /* blue-400 */
  --primary-deep:    #1D4ED8;                    /* blue-700, hover states */

  /* Accent energy — hot coral. Badges, the Free Book pill, the
     Entrepreneurship 7-12 book accent. Never used inside title <em>. */
  --accent:          #EC4899;                    /* pink-500 */
  --accent-ink:      #BE185D;                    /* pink-700, AA on ivory */
  --accent-deep:     #9D174D;                    /* pink-800, hover */

  /* Highlight — lemon yellow. Financial Literacy book accent, the third color
     in the tricolor stripe, optional rhythm bands. */
  --highlight:       #FACC15;                    /* yellow-400 */
  --highlight-ink:   #B45309;                    /* amber-700, AA on ivory */
  --highlight-soft:  #FEF9C3;                    /* yellow-100 */

  /* Lines and surfaces — derived from the cool ink so they sit naturally
     against warm ivory without competing. */
  --hairline:        rgba(26, 45, 51, 0.10);
  --hairline-strong: rgba(26, 45, 51, 0.18);
  --ink-veil:        rgba(26, 45, 51, 0.10);
}

/* === TYPOGRAPHY TOKENS === */
:root {
  --font-display: 'Newsreader', Georgia, serif;
  --font-ui:      'Inter', system-ui, sans-serif;
}

/* === NUMERAL HANDLING ===
   Body keeps proportional figures (editorial feel for prose).
   Tabular figures are applied to .price, .num-tabular, and data contexts
   only — see styles.css for utility classes. */

/* === SPACING SCALE === */
:root {
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  --page-gutter: clamp(20px, 5vw, 64px);
  --measure:     65ch;
}

/* === TYPE SCALE === */
:root {
  --fs-micro:        clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --fs-body:         clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lead:         clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --fs-eyebrow:      clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);
  --fs-h3:           clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-h2:           clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --fs-h1:           clamp(2rem, 1.7rem + 1.5vw, 3rem);
  --fs-display:      clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  --fs-pull-quote:   clamp(1.375rem, 1.25rem + 0.625vw, 1.75rem);

  --lh-tight:    1.1;
  --lh-snug:     1.3;
  --lh-body:     1.55;
  --lh-loose:    1.7;
}

/* === LAYOUT === */
:root {
  --max:    1120px;
  --radius: 0;                                   /* squared chrome — clean editorial */
  --radius-soft: 6px;
}

/* === MOTION === */
:root {
  --motion-fast:    150ms ease-out;
  --motion-base:    220ms ease-out;
  --motion-slow:    400ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --motion-breathe: 7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:    0ms;
    --motion-base:    0ms;
    --motion-slow:    0ms;
    --motion-breathe: 0s;
  }
}