/* ==========================================================================
   UNDERCURRENT — GOLDEN HOUR DESIGN TOKENS (M1, v2.0)
   Single source of truth. Components consume tokens; pages consume components.
   All text/background pairs verified WCAG AA (small text) on 2026-07-24.
   ========================================================================== */
:root{
  /* ---- Core palette (unchanged from v1.x — do not tune casually) ---- */
  --espresso:#171007;   /* page ground        */
  --walnut:#1F1810;     /* raised surfaces    */
  --panel:#282017;      /* inset surfaces     */
  --cream:#F6EAD3;      /* primary text       */
  --prose:#E4D8BF;      /* long-form body     */
  --dim:#B3A488;        /* secondary text  7.7:1 on espresso */
  --amber:#FFB347;      /* primary accent 10.6:1 */
  --coral:#FF7847;      /* hot accent      7.2:1 */
  --dial:#E8D5A3;       /* instrument cream   */
  --hairline:rgba(246,234,211,.12);

  /* ---- Semantic aliases (prefer these in new components) ---- */
  --bg:var(--espresso);
  --bg-raised:var(--walnut);
  --bg-inset:var(--panel);
  --text:var(--cream);
  --text-dim:var(--dim);
  --accent:var(--amber);
  --accent-hot:var(--coral);
  --rule:var(--hairline);
  --rule-strong:rgba(246,234,211,.3);
  --focus:var(--amber);

  /* ---- Typography ---- */
  --font-serif:'Fraunces',serif;
  --font-sans:'Karla',sans-serif;
  --font-mono:'Courier Prime',monospace;
  --mono-size:.74rem;
  --mono-tracking:.12em;

  /* ---- Spacing scale (4px base) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:52px; --s10:70px; --s11:100px;

  /* ---- Radii ---- */
  --r-1:3px;  /* controls        */
  --r-2:4px;  /* small chrome    */
  --r-3:6px;  /* cards, panels   */

  /* ---- Motion (collapsed entirely under prefers-reduced-motion) ---- */
  --t-fast:.15s;
  --t-base:.2s;

  /* ---- Elevation & glow budget (primary button + drawer ONLY) ---- */
  --glow-amber:0 0 18px rgba(255,179,71,.45), 0 0 60px rgba(255,179,71,.14);
  --glow-amber-hover:0 0 26px rgba(255,179,71,.6), 0 0 80px rgba(255,179,71,.2);
  --shadow-pop:0 18px 50px rgba(0,0,0,.55);

  /* ---- Layout ---- */
  --measure-wide:1180px;
  --measure-narrow:760px;
  --gutter:32px;
  --tap-min:44px;
}