/* ============================================================================
   Vāk — shared design tokens (the single source).
   Linked by app.html, login.html and signup.html BEFORE each page's own
   <style> block, so page styles may consume and (rarely) re-pin these tokens.

   Rules of the road:
   - The original 15 app.html tokens keep their names — never rename them.
   - New values enter HERE first; a hex/px literal in a page style block is
     drift unless it's a documented one-off (see FINDINGS.md, design system).
   - Scales: 4pt spacing (--sp-*), type ramp (--fs-*), 3 radius tiers + pill.
   ========================================================================= */

:root{
  /* — core palette (the original app.html tokens, unchanged) — */
  --bg:#f3f4f6; --surface:#ffffff; --surface-2:#f7f8fa; --ink:#101418; --muted:#69727d;
  --line:#e6e8eb; --brand:#0a66c2; --brand-d:#004182; --brand-soft:#e8f1fb;
  --green:#0a7d4a; --red:#c2300a; --amber:#7a5b00;
  --shadow:0 1px 3px rgba(16,20,24,.06),0 8px 24px rgba(16,20,24,.06);
  --radius:18px; --tab-h:64px;

  /* — palette additions: absorb former literals, values unchanged — */
  --on-brand:#fff;                      /* text/icons on brand- or green-filled surfaces */
  --err-bg:#fdecea; --err-ink:#b3261e;  /* auth error panel (was login/signup literals) */
  --rec:#e0492b; --rec-d:#b4250f;       /* recording-state gradient (NB: pulse rgba in
                                           app.html is 196,48,10 — pre-existing off-by-2
                                           vs --red, kept as-is; see FINDINGS #4) */
  --auth-grad:linear-gradient(135deg,#0a66c2,#063257); /* auth backdrop + wordmark dot */

  /* — type ramp (formalizes current usage; 11px floor per house rules) — */
  --fs-2xs:11px;     /* numeric badges, tab labels — absolute floor */
  --fs-xs:12px;      /* meta, counts, eyebrows */
  --fs-sm:13px;      /* hints, labels, chips */
  --fs-base:14px;    /* secondary body */
  --fs-md:15px;      /* card body, post text */
  --fs-lg:16px;      /* inputs, buttons (iOS no-zoom floor) */
  --fs-title:18px;   /* topbar brand */
  --fs-h1:22px;      /* page + wizard headings */
  --fs-display:34px; /* recording timer */

  /* — spacing: 4pt grid — */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px;

  /* — radius tiers — */
  --r-sm:10px;           /* inputs, small buttons, badges, calendar cells */
  --r-md:14px;           /* buttons, chips, list cards, previews */
  --r-lg:var(--radius);  /* 18px — cards */
  --r-full:999px;        /* pills, dots */

  /* — elevation — */
  --shadow-lg:0 20px 60px rgba(0,0,0,.35);        /* wizard card */
  --shadow-brand:0 10px 28px rgba(10,102,194,.4); /* record button */

  /* — focus — */
  --focus-ring:2px solid var(--brand);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1016; --surface:#151b22; --surface-2:#1b232c; --ink:#e9edf1; --muted:#909aa6;
    --line:#262f39; --brand:#4d9fe8; --brand-d:#2b7fd0; --brand-soft:#16273a;
    --green:#3fce8e; --red:#ff7a59; --amber:#e8c069;
    --shadow:0 1px 3px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
    --err-bg:#3a1611; --err-ink:#ffb4a1;
    --shadow-lg:0 20px 60px rgba(0,0,0,.6);
  }
}

/* ============================================================================
   Shared states layer
   ========================================================================= */

/* Text fields get the same 2px brand ring every button already has.
   (app.html's datetime-local :focus rule still wins there — same ring, no offset.) */
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:var(--focus-ring);outline-offset:2px;
}

/* Reduced motion: kill decorative animation & transitions app-wide (PRINCIPLES §6).
   Long ops stay honest without spinners — the busy overlay carries a live seconds counter. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}