/* ============================================================
   omgfixmd design tokens — single source of truth.
   Linked from every HTML entry + the React SPA. Any token used
   on this site must live here. Page-level :root overrides are
   the anti-pattern this file was created to retire.
   ============================================================ */

:root {
  /* Surface */
  --bg: #ffffff;
  --bg-sub: #fbfbfa;
  --bg-cream: #faf8f3;

  /* Ink — warm-neutral, not pure black */
  --ink: #37352f;
  --ink-2: #5c5b57;
  --muted: #9b9a97;

  /* Edges (the semantic name). --border / --border-strong kept
     as aliases so the existing ~400 references don't churn. */
  --edge: #ebebea;
  --edge-strong: #d9d9d6;
  --border: var(--edge);
  --border-strong: var(--edge-strong);

  /* Brand accent = the yellow highlight. The one color that's
     unmistakably this product. Used sparingly, as edge and
     underline, never as a background for UI chrome. */
  --hl-fill: #fde68a;
  --hl-fill-soft: #fef3c7;
  --hl-edge: #f59e0b;

  /* Sticky-note pastels — the paper fills for in-post callouts
     (.verdict, .pullquote) and the homepage audience cards.
     Butter is the default; blush and sage are editorial variants.
     Not dark-mode-flipped: paper stays paper. */
  --note-butter: #fff1c6;
  --note-blush: #ffdcd8;
  --note-sage: #dae9d0;

  /* Interactive accent — the marker yellow. Same --hl-fill the hero
     uses for the .mark band, so every interactive hit on the site
     carries the same brand signal and nothing ever shifts to orange.
     This replaces the generic blue that used to live at --accent. */
  --link-accent: var(--hl-fill);
  --link-accent-soft: rgba(253, 230, 138, 0.55);
  --ring: rgba(253, 230, 138, 0.95);

  /* Legacy alias — the old --accent was #2383e2, a generic blue
     that had no relationship to the rest of the palette. Point any
     surviving reference at the brand interactive color so nothing
     stays blue, even if a page hasn't fully migrated. */
  --accent: var(--link-accent);

  /* Typography */
  --reading-font: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Motion — two signature easings, named.
     Quiet = responsive micro-moves. Considered = UI reconfiguring. */
  --ease-quiet: cubic-bezier(.2, .8, .2, 1);
  --ease-considered: cubic-bezier(.22, 1, .36, 1);
  --ease-overshoot: cubic-bezier(.34, 1.56, .64, 1);
}