/* ============================================================================
   wake.css — the shared Wake web design foundation (web-parity plan, Phase 0)
   ----------------------------------------------------------------------------
   ONE token layer for every web surface, carrying the native iOS app's exact
   light + dark palette (ios/WakeApp/UI/Shared/WakeStyle.swift). Pages link this,
   delete their own drifted :root block, and inherit an appearance-adaptive theme
   for free — because their CSS already reads var(--ink)/var(--accent)/... .

   Dark theme is a corrected invert (warm cream ⇄ deep navy-night), NOT a naive
   flip; the hexes below match the app swatch-for-swatch. See docs/web-parity-plan.md.
   Keep in lock-step with WakeStyle.swift.
   ============================================================================ */

:root{
  color-scheme: light dark;   /* native scrollbars/controls follow the theme in dark */

  /* — core palette (light) — */
  --paper:#faf8f4;     /* page ground */
  --card:#faf8f4;      /* lifted surface (== paper in light; delineated by hairlines) */
  --ink:#16294d;       /* primary text + data (navy) */
  --dim:#525d6e;       /* secondary text (navy-slate, ≥6:1 on paper) */
  --label:#3a4658;     /* section headers (a touch stronger than dim) */
  --accent:#b51e34;    /* the ONE highlight — leader, "now", the single CTA */
  --river:#2e6cb5;     /* course line (web-only; the map is Apple's on iOS) */
  --good:#2f6b4f;      /* faster / healthy */
  --warn:#c77d1a;      /* degraded / waiting */
  --scaffold:#c9ccd1;  /* gridlines, inactive dots, baselines */
  --faint:#efe9dd;     /* quiet / off-state surface */
  --fill:#ece6da;      /* chip, sparkline area tint */
  --hair:rgba(22,41,77,.12);   /* 1px borders + dividers */
  --hair2:rgba(22,41,77,.07);  /* faint dividers (table rows) */
  --shadow:0 2px 14px rgba(21,25,29,.10);

  /* — semantic aliases consumed by the spectator + operator surfaces (Phases 2–3) — */
  --buffer:var(--warn);   /* viewer "waiting for boats" */
  --amber:var(--warn);    /* program "setup" badge */
  --live:var(--good);     /* operator racing / auto-start */
  --stop:var(--accent);   /* operator scratched / danger */
  --idle:#aab1b9;         /* operator not-started */

  /* — type — */
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --serif:"Source Serif 4",Georgia,serif;

  /* — motion — */
  --ease:cubic-bezier(.22,.61,.36,1);   /* easeOut, the native default */
  --dur-1:.12s;   /* press / tap feedback */
  --dur-2:.22s;   /* reveals, tab + deck transitions */
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#0c1626;
    --card:#14223c;      /* one rung above ground — lifts in dark */
    --ink:#eef1f4;       /* cool near-white (a de-warmed invert) */
    --dim:#9fb0cb;
    --label:#b7c4da;
    --accent:#ec3a52;    /* brightened so crimson still reads on navy-night */
    --river:#4d8fd6;
    --good:#34d27b;
    --warn:#f2a93a;
    --scaffold:#384867;
    --faint:#14223c;
    --fill:#1b2c4a;
    --hair:rgba(159,176,203,.15);
    --hair2:rgba(159,176,203,.08);
    --shadow:0 2px 16px rgba(0,0,0,.45);
    --idle:#5b6b83;
  }
}

/* ── WakeSpinner — the branded loading indicator (crimson flywheel + pulsing W) ──
   Drop-in replacement for every static "Loading…" text. Markup comes from
   wake-ui.js (wakeSpinner) or is inlined for the pre-JS first paint. Theme-aware
   because the SVG reads var(--hair)/var(--accent)/var(--ink). */
.wsp{ display:block; width:var(--wsp-size,72px); height:var(--wsp-size,72px); }
.wsp-arc{ transform-box:fill-box; transform-origin:center; animation:wsp-rot 1.15s linear infinite; }
.wsp-dot{ transform-box:fill-box; transform-origin:center; animation:wsp-pulse 1.05s ease-in-out infinite; }
@keyframes wsp-rot{ to{ transform:rotate(360deg); } }
@keyframes wsp-pulse{ 0%,100%{ opacity:.5; transform:scale(.62); } 50%{ opacity:1; transform:scale(1); } }
.wsp-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:56px 8px; text-align:center; }
.wsp-label{ font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.02em; color:var(--dim); }

/* ── a11y baseline every surface inherits ── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  .wsp-arc, .wsp-dot{ animation:none; }
  .wsp-dot{ opacity:1; transform:none; }
}