/* ============================================================================
   Vivek Shimpi — design tokens
   Cool monochrome ink/paper with a single signal-blue accent.

   Changed from the design source in one place, deliberately:
   --ink-3 was #76808C, which measures 3.74:1 on --paper and 3.48:1 on
   --paper-alt. It is used for every eyebrow, ledger key, credential caption and
   timeline date -- all 12-13px -- so the palette failed WCAG AA (4.5:1) at
   exactly the sizes where legibility matters most. Darkened to #5E6873, which
   measures 5.34:1 / 4.96:1 and keeps the same cool grey character.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Color: cool ink / paper, single signal-blue accent ---- */
  --paper:        #F6F7F8;
  --paper-alt:    #EDEFF2;
  --paper-deep:   #11151B;
  --surface:      #FFFFFF;
  --surface-sub:  #FAFBFC;

  --ink:    #14181E;
  --ink-2:  #444E59;
  --ink-3:  #5E6873;  /* AA-safe for small text; see note above */
  --ink-4:  #A2ABB5;  /* decorative only -- 2.17:1, never for text */

  --on-deep:   #EEF1F4;
  --on-deep-2: #97A2AE;

  --accent:      #1C4C7C;
  --accent-deep: #143A61;
  --accent-soft: #3E6B98;
  --accent-tint: #E9EFF5;
  --accent-line: #C7D6E5;

  --line:      #E2E5E9;
  --line-2:    #D4D9DF;
  --line-deep: #283039;

  --bw:        #14181E;
  --bw-strong: #000000;

  /* functional semantics -- sparing */
  --ok:        #2E6A4E;
  --ok-tint:   #E4EFE9;
  --warn:      #8A6418;
  --warn-tint: #F4ECDC;

  /* ---- Type ---- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.8125rem; /* 13 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-md:   1.0625rem; /* 17 */
  --fs-lg:   1.25rem;   /* 20 */
  --fs-xl:   1.5rem;    /* 24 */
  --fs-2xl:  1.9375rem; /* 31 */
  --fs-3xl:  2.5rem;    /* 40 */
  --fs-4xl:  3.375rem;  /* 54 */
  --fs-5xl:  4.5rem;    /* 72 */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:    1.04;
  --lh-snug:     1.16;
  --lh-heading:  1.22;
  --lh-body:     1.62;
  --lh-relaxed:  1.75;

  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.08em;
  --ls-label:    0.14em;

  /* ---- Spacing (4px base, 8pt rhythm) ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  --gutter:     1.5rem;
  --maxw:       1120px;
  --maxw-prose: 680px;
  --maxw-wide:  1280px;

  /* ---- Radii: small & precise ---- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* ---- Shadows: cool-tinted, soft ---- */
  --shadow-xs:    0 1px 2px rgba(20, 30, 45, 0.05);
  --shadow-sm:    0 1px 2px rgba(20, 30, 45, 0.05), 0 2px 8px rgba(20, 30, 45, 0.045);
  --shadow-md:    0 4px 14px rgba(20, 30, 45, 0.08), 0 1px 3px rgba(20, 30, 45, 0.05);
  --shadow-lg:    0 18px 48px rgba(17, 21, 27, 0.16), 0 4px 12px rgba(17, 21, 27, 0.08);
  --shadow-focus: 0 0 0 3px rgba(28, 76, 124, 0.32);

  /* ---- Motion ---- */
  --dur-fast: 120ms;
  --dur:      180ms;
  --dur-slow: 320ms;
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}