:root{
  /* ═══ BRAND-SYSTEM-CF v1.0 ═══ spec: _design/BRAND-SYSTEM-CF-v1.md ═══ */

  /* ── SUBSTRATE ── */
  --paper:#FFFFFF; --canvas:#F9F8F6; --wash:#F0EEEA;
  --ink:#17120F; --muted:#625C4D; --line:#E3DED6; --platinum:#CFCCC4;
  --lift:0 6px 16px -12px rgba(40,32,26,.30);
  --lift-sheet:0 18px 40px -22px rgba(40,32,26,.30);
  --lift-press:0 3px 8px -7px rgba(40,32,26,.32);

  /* ── THE SPINE · ordinal effort ── */
  /* vibrant ramp — ordinality now carried by HUE, not lightness.
     every step clears 3:1 on paper; no near-black anywhere. */
  --s1:#195686; --s2:#3A418D; --s3:#5400DB;
  --s4:#C308F7; --s5:#E62E8C; --s6:#F31833;

  /* ── READINESS · ordinal recovery (capped at r3 for charts) ── */
  --r1:#123F45; --r2:#1F7A76; --r3:#5CB39B;

  /* ── STATE ── */
  --volt:#60D501;        /* "happening now". FILL ONLY. */
  --volt-ink:#5CB10B;    /* marks, rules, fills. 2.55:1 — NOT for text */
  --volt-text:#41800A;   /* the text-safe form. 4.58:1 on ground */
  --accent:#F31833;      /* = --s6 */
  --accent-text:#C42638; /* accent type under 18px. 5.70:1 */

  /* ── WHOOP metric colors · marks only, never text ── */
  /* Exact per WHOOP Brand & Design Guidelines: the three recovery-zone
     colors plus the strain and sleep metric colors. These exist ONLY for
     depictions of WHOOP metrics (rings, trend bars, wearable-fed charts,
     CTA mock ring); the app's own palette is never expressed through them. */
  --wz-green:#16EC06;
  --wz-yellow:#FFDE00;
  --wz-red:#FF0026;
  --wz-strain:#0093E7;
  --wz-sleep:#7BA1BB;

  /* ── legacy aliases · retired hues now resolve through the system ── */
  --accent2:var(--accent-text); /* retired — UI signal, never a data colour */
  --good:var(--volt-text);/* was #2f8f4e */
  --warn:var(--accent-text); /* was #c98a12 — palette has no amber */

  /* ── TYPE ── */
  --helv:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --courier:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --w-rec:400; --w-lab:500; --w-st:900;

  /* ── FORM · radius encodes function ── */
  --radius:4px;      /* surface */
  --r-fact:100px;    /* read-only data */
  --r-choice:0;      /* anything selectable */
  --r-action:0;      /* buttons */

  /* ── MOTION ── */
  --ease:cubic-bezier(.2,.9,.25,1);
  --t-touch:140ms; --t-move:220ms;

  /* ── TEXTURE ── */
  --lattice:repeating-linear-gradient(64deg,transparent 0 15px,rgba(23,18,15,.10) 15px 16px),
            repeating-linear-gradient(-64deg,transparent 0 15px,rgba(23,18,15,.10) 15px 16px);
}
*{margin:0;padding:0;box-sizing:border-box}
/* two-tone overscroll: rubber-banding past the top shows canvas, past the bottom shows footer black */
html{-webkit-text-size-adjust:100%;background:linear-gradient(var(--canvas),var(--canvas) 50%,var(--ink) 50%,var(--ink))}
body{font-family:var(--helv);letter-spacing:-.005em;color:var(--ink);background:var(--canvas);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:var(--helv);cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:var(--helv);font-size:16px}
.accent{color:var(--accent)} .blue{color:var(--accent-text)} .mut{color:var(--muted)}
.courier{font-family:var(--courier)}
.hide{display:none!important}
/* v3.15 — the app is light-only: say so, so form controls never pick up a dark scheme from the host */
:root{color-scheme:light}