@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600;700;800&display=swap');
/* ============================================================================
   coach-theme.css — Superhuman Code coach-app SEMANTIC TOKEN THEME BASE
   ----------------------------------------------------------------------------
   Roles, not colors. Every surface/text/brand/state has a token; components
   reference ONLY var(--token). Swap document.documentElement[data-palette] to
   re-theme the whole app. 5 hand-tuned, contrast-safe palettes below.

   Contrast contract (verified in contrast-check.cjs, all >= 4.5:1 AA):
     --on-primary / --primary        --on-accent / --accent
     --text / --bg   --text / --surface   --text-muted / --surface
     --on-danger / --danger
   ----------------------------------------------------------------------------
   TOKEN ROLES
     --bg          page background
     --surface     card / raised panel
     --surface-2   tint / inset / chip well (elevated-within-card)
     --line        hairline borders & dividers
     --text        primary ink
     --text-muted  secondary ink (labels, meta)
     --text-faint  tertiary ink (decorative, sparingly)
     --primary     brand: section headers, active states, primary fill
     --primary-soft lighter brand shade — FILL ONLY (rings/bars), never small text
     --on-primary  ink/icon ON --primary  (>=4.5:1 vs --primary)
     --on-primary-dim  dimmed on-primary for inactive text on a primary surface
     --accent      the POP — progress, active chips, small emphasis (sparingly)
     --on-accent   ink ON --accent  (>=4.5:1 vs --accent)
     --danger      alerts / destructive / "missed"
     --on-danger   ink ON --danger  (>=4.5:1 vs --danger)
     --success     "on track" / completed status
     --warning     "partial" / caution
     --ring-track  empty track behind rings & bars
     --shadow / --shadow-sm / --shadow-lift  palette-tinted elevation
   ========================================================================== */

/* ---- DEFAULT = GREEN (works with no [data-palette] attribute) ------------- */
:root,
:root[data-palette="green"]{
  /* TYPE SYSTEM (palette-independent): display=Bricolage Grotesque (headings/labels/big numbers), body=Inter. One 2-font system for the whole coach app — no Fraunces / DM Sans / Inter Tight. */
  --font-display:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Inter','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --bg:#FAF8F4;  --surface:#FFFFFF;  --surface-2:#EEF3EC;  --line:#EAE6DE;
  --text:#1E2A22; --text-muted:#5C6961; --text-faint:#8F9B91;
  --primary:#1F3D2F; --primary-soft:#2E5A44; --on-primary:#FFFFFF; --on-primary-dim:rgba(255,255,255,.68);
  --accent:#C9F25E; --on-accent:#1F3D2F;
  --danger:#C24632; --on-danger:#FFFFFF; --success:#3E7F55; --warning:#D8952C;
  --ring-track:#E7EEE4;
  --shadow:0 8px 22px -14px rgba(31,61,47,.18);
  --shadow-sm:0 4px 12px -6px rgba(31,61,47,.30);
  --shadow-lift:0 18px 40px -20px rgba(31,61,47,.30);
}

/* ---- MONO — editorial office black/white/gray, restrained warm-sand accent */
:root[data-palette="mono"]{
  --bg:#F4F4F2;  --surface:#FCFCFB;  --surface-2:#EDECE8;  --line:#E1E0DC;
  --text:#1E1E1D; --text-muted:#63625E; --text-faint:#97968F;
  --primary:#242422; --primary-soft:#4C4B47; --on-primary:#FFFFFF; --on-primary-dim:rgba(255,255,255,.70);
  --accent:#CDC4B2; --on-accent:#242422;
  --danger:#A2412F; --on-danger:#FFFFFF; --success:#4E6B55; --warning:#9A7A34;
  --ring-track:#E6E5E1;
  --shadow:0 8px 22px -14px rgba(28,28,26,.16);
  --shadow-sm:0 4px 12px -6px rgba(28,28,26,.24);
  --shadow-lift:0 18px 40px -20px rgba(28,28,26,.24);
}

/* ---- BLUE — cool: blue-gray page, navy primary, bright azure pop --------- */
:root[data-palette="blue"]{
  --bg:#F0F4F9;  --surface:#FFFFFF;  --surface-2:#E6EDF6;  --line:#D8E2EF;
  --text:#17232F; --text-muted:#556676; --text-faint:#8795A5;
  --primary:#1E3A5F; --primary-soft:#33587E; --on-primary:#FFFFFF; --on-primary-dim:rgba(255,255,255,.70);
  --accent:#5AB0EE; --on-accent:#0E2233;
  --danger:#BE4437; --on-danger:#FFFFFF; --success:#2E7D5B; --warning:#CE872C;
  --ring-track:#DDE7F2;
  --shadow:0 8px 22px -14px rgba(30,58,95,.20);
  --shadow-sm:0 4px 12px -6px rgba(30,58,95,.28);
  --shadow-lift:0 18px 40px -20px rgba(30,58,95,.28);
}

/* ---- PINK — blush page, deep berry primary, hot-rose pop ----------------- */
:root[data-palette="pink"]{
  --bg:#FBF1F4;  --surface:#FFFDFD;  --surface-2:#F6E5EB;  --line:#EFDBE2;
  --text:#2C1D24; --text-muted:#785A66; --text-faint:#AC8E9B;
  --primary:#7C2247; --primary-soft:#A6395F; --on-primary:#FFFFFF; --on-primary-dim:rgba(255,255,255,.72);
  --accent:#F86AA0; --on-accent:#2C1D24;
  --danger:#C13B32; --on-danger:#FFFFFF; --success:#3E7D63; --warning:#CB8330;
  --ring-track:#F2E0E7;
  --shadow:0 8px 22px -14px rgba(90,25,52,.18);
  --shadow-sm:0 4px 12px -6px rgba(90,25,52,.26);
  --shadow-lift:0 18px 40px -20px rgba(90,25,52,.26);
}

/* ---- WARM — sand page, terracotta primary, amber/gold pop ---------------- */
:root[data-palette="warm"]{
  --bg:#F7EEE1;  --surface:#FFFCF6;  --surface-2:#F0E3D0;  --line:#E8D9C2;
  --text:#2B2115; --text-muted:#6D5D47; --text-faint:#A6937A;
  --primary:#A2481F; --primary-soft:#C0673A; --on-primary:#FFFFFF; --on-primary-dim:rgba(255,255,255,.74);
  --accent:#E7A72C; --on-accent:#2B2115;
  --danger:#7E1F16; --on-danger:#FFFFFF; --success:#5C7A3C; --warning:#C67F27;
  --ring-track:#EDDFC9;
  --shadow:0 8px 22px -14px rgba(90,52,28,.20);
  --shadow-sm:0 4px 12px -6px rgba(90,52,28,.28);
  --shadow-lift:0 18px 40px -20px rgba(90,52,28,.28);
}