/* LevaIQ — Leva OS design TOKENS only (extracted; component classes dropped to avoid collisions) */
/* ============================================================
   LEVA OS — Design System (LIGHT + DARK)
   Apple-premium · clinical-instrument · editorial precision.
   Ported from the UI prototype (commit 0eec82f app/styles.css).

   THEMING MODEL
   -------------
   Every color is a semantic CSS token. Two complete palettes share the SAME
   token names:
     · :root                      → LIGHT (clinical, high-contrast, default)
     · html[data-theme="dark"]    → DARK  (the original near-black look, verbatim)
   The no-FOUC inline <script> in app/layout.tsx always sets data-theme before
   first paint (default = system preference), so the page never flashes the
   wrong theme. Structural tokens (radius, type, dims) live below and are shared.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Schibsted+Grotesk:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ===========================================================
     LIGHT palette (default) — clinical paper-white surfaces, dark ink.
     Accent hues match dark mode but are darkened for AA contrast on light.
     =========================================================== */
  /* ---- Neutrals (warm near-white, layered surfaces) ---- */
  --bg:        oklch(0.985 0.002 264);  /* page */
  --bg-sunk:   oklch(0.955 0.003 264);  /* inset wells */
  --surface:   oklch(1 0 0);            /* cards (pure white) */
  --surface-2: oklch(0.965 0.003 264);  /* hover/raised */
  --ink:       oklch(0.23 0.013 264);   /* primary text */
  --ink-2:     oklch(0.38 0.013 262);   /* secondary */
  --ink-3:     oklch(0.50 0.012 260);   /* tertiary */
  --ink-4:     oklch(0.60 0.011 260);   /* faint / axis */
  --line:      oklch(0.90 0.004 264);   /* hairline */
  --line-2:    oklch(0.935 0.003 264);  /* faint hairline */
  --line-strong: oklch(0.84 0.006 264);

  /* ---- Brand accent (confident blue, grounded for light) ---- */
  --brand:     oklch(0.55 0.18 256);
  --brand-ink: oklch(0.50 0.18 256);
  --brand-2:   oklch(0.60 0.17 252);
  --brand-soft:oklch(0.90 0.05 256);
  --brand-tint:oklch(0.955 0.022 256);
  /* text/icon that sits ON the brand gradient (badges, primary btn, avatar) */
  --on-brand:  oklch(0.99 0.005 256);
  /* fixed white for filled icon chips (.act-ico) — same in both themes */
  --on-accent: oklch(0.99 0 0);

  /* ---- Semantic / chart palette (saturated, readable on white) ---- */
  --c-fitness: oklch(0.55 0.17 252);   /* CTL  - blue   */
  --c-fatigue: oklch(0.55 0.20 305);   /* ATL  - violet */
  --c-form:    oklch(0.62 0.14 70);     /* TSB  - amber  */
  --c-green:   oklch(0.56 0.15 156);    /* optimal/good  */
  --c-amber:   oklch(0.64 0.15 72);     /* caution       */
  --c-red:     oklch(0.57 0.21 25);     /* high-risk/bad */
  --c-cyan:    oklch(0.58 0.12 222);    /* sleep         */
  --c-pink:    oklch(0.58 0.18 10);     /* heart-rate    */

  /* soft chip fills (light tints) + matching ink for the chip text */
  --green-soft: oklch(0.93 0.06 156);
  --amber-soft: oklch(0.93 0.07 80);
  --red-soft:   oklch(0.94 0.05 22);
  --cyan-soft:  oklch(0.93 0.05 212);
  --green-chip-ink: oklch(0.40 0.13 156);
  --amber-chip-ink: oklch(0.44 0.12 72);
  --red-chip-ink:   oklch(0.46 0.17 25);
  --blue-chip-ink:  oklch(0.42 0.16 256);

  /* zone ramp (training intensity Z1..Z7) — darkened for light bg */
  --z1: oklch(0.52 0.04 250);
  --z2: oklch(0.54 0.11 200);
  --z3: oklch(0.54 0.14 156);
  --z4: oklch(0.60 0.14 96);
  --z5: oklch(0.58 0.15 64);
  --z6: oklch(0.56 0.17 36);
  --z7: oklch(0.54 0.19 18);

  /* ---- Shadow (soft, airy on light) ---- */
  --sh-1: 0 1px 2px oklch(0.45 0.02 264 / 0.08), 0 1px 1px oklch(0.45 0.02 264 / 0.05);
  --sh-2: 0 2px 8px oklch(0.45 0.02 264 / 0.10), 0 1px 2px oklch(0.45 0.02 264 / 0.06);
  --sh-3: 0 10px 32px oklch(0.40 0.02 264 / 0.14), 0 2px 8px oklch(0.40 0.02 264 / 0.08);
  --sh-pop: 0 20px 56px oklch(0.35 0.02 264 / 0.18), 0 6px 16px oklch(0.35 0.02 264 / 0.10);

  /* ---- Theme-dependent atmosphere / chrome ---- */
  --aurora-1: oklch(0.72 0.10 256 / 0.14);  /* top-left page aurora */
  --aurora-2: oklch(0.74 0.09 300 / 0.10);  /* top-right page aurora */
  --nav-bg:     oklch(0.99 0.002 264 / 0.78);
  --topbar-bg:  oklch(0.985 0.002 264 / 0.80);
  --tip-bg:     oklch(1 0 0);                /* chart tooltip surface */
  --scroll-thumb: var(--line-strong);
  --selection: var(--brand-soft);

  /* ---- Chart-only helper tokens (read by useChartTheme) ---- */
  --chart-grid:       oklch(0.45 0.02 264 / 0.10);  /* cartesian grid lines */
  --chart-axis:       oklch(0.50 0.012 260);         /* axis tick text */
  --chart-tip-border: oklch(0.88 0.005 264);         /* tooltip border */
  --chart-tip-label:  oklch(0.50 0.012 260);         /* tooltip header */
  --chart-cursor:     oklch(0.45 0.02 264 / 0.22);   /* hover cursor line */

  /* ===========================================================
     Structural tokens (shared across themes)
     =========================================================== */
  /* ---- Radius ---- */
  --r-xs: 7px;  --r-sm: 10px;  --r-md: 14px;  --r-lg: 18px;  --r-xl: 24px;  --r-pill: 999px;

  /* ---- Type ---- */
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Schibsted Grotesk", var(--sans);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --nav-w: 244px;
  --top-h: 60px;

  color-scheme: light;
}
html[data-theme="dark"] {
  /* ===========================================================
     DARK palette — the original near-black surface stack, verbatim.
     =========================================================== */
  /* ---- Neutrals (cool near-black, layered surfaces) ---- */
  --bg:        oklch(0.18 0.012 264);   /* page */
  --bg-sunk:   oklch(0.15 0.012 264);   /* inset wells */
  --surface:   oklch(0.215 0.013 264);  /* cards */
  --surface-2: oklch(0.235 0.013 264);  /* hover/raised */
  --ink:       oklch(0.97 0.006 250);   /* primary text */
  --ink-2:     oklch(0.82 0.008 255);   /* secondary */
  --ink-3:     oklch(0.66 0.010 258);   /* tertiary */
  --ink-4:     oklch(0.52 0.012 260);   /* faint / axis */
  --line:      oklch(0.30 0.012 264);   /* hairline */
  --line-2:    oklch(0.265 0.012 264);  /* faint hairline */
  --line-strong: oklch(0.38 0.013 264);

  /* ---- Brand accent (confident blue, lifted for dark) ---- */
  --brand:     oklch(0.68 0.16 256);
  --brand-ink: oklch(0.80 0.13 254);
  --brand-2:   oklch(0.74 0.15 250);
  --brand-soft:oklch(0.36 0.09 256);
  --brand-tint:oklch(0.27 0.045 256);
  --on-brand:  oklch(0.15 0.01 264);
  --on-accent: oklch(0.99 0 0);

  /* ---- Semantic / chart palette (luminous on dark) ---- */
  --c-fitness: oklch(0.72 0.15 248);   /* CTL  - blue   */
  --c-fatigue: oklch(0.70 0.17 305);   /* ATL  - violet */
  --c-form:    oklch(0.82 0.14 82);    /* TSB  - amber  */
  --c-green:   oklch(0.78 0.17 156);   /* optimal/good  */
  --c-amber:   oklch(0.82 0.15 80);    /* caution       */
  --c-red:     oklch(0.70 0.19 22);    /* high-risk/bad */
  --c-cyan:    oklch(0.78 0.13 212);   /* sleep         */
  --c-pink:    oklch(0.76 0.16 8);     /* heart-rate    */

  --green-soft: oklch(0.34 0.08 156);
  --amber-soft: oklch(0.36 0.08 80);
  --red-soft:   oklch(0.34 0.09 22);
  --cyan-soft:  oklch(0.34 0.07 212);
  --green-chip-ink: oklch(0.92 0.10 156);
  --amber-chip-ink: oklch(0.94 0.09 84);
  --red-chip-ink:   oklch(0.92 0.10 22);
  --blue-chip-ink:  oklch(0.95 0.05 256);

  /* zone ramp (training intensity Z1..Z7) */
  --z1: oklch(0.62 0.04 250);
  --z2: oklch(0.66 0.11 200);
  --z3: oklch(0.70 0.14 156);
  --z4: oklch(0.78 0.15 96);
  --z5: oklch(0.76 0.16 64);
  --z6: oklch(0.70 0.18 36);
  --z7: oklch(0.66 0.20 18);

  /* ---- Shadow (deep, premium on dark) ---- */
  --sh-1: 0 1px 2px oklch(0 0 0 / 0.30), 0 1px 1px oklch(0 0 0 / 0.24);
  --sh-2: 0 2px 8px oklch(0 0 0 / 0.36), 0 1px 2px oklch(0 0 0 / 0.28);
  --sh-3: 0 10px 32px oklch(0 0 0 / 0.46), 0 2px 8px oklch(0 0 0 / 0.30);
  --sh-pop: 0 20px 56px oklch(0 0 0 / 0.58), 0 6px 16px oklch(0 0 0 / 0.40);

  /* ---- Theme-dependent atmosphere / chrome ---- */
  --aurora-1: oklch(0.30 0.06 256 / 0.40);
  --aurora-2: oklch(0.28 0.05 300 / 0.22);
  --nav-bg:     oklch(0.165 0.012 264 / 0.72);
  --topbar-bg:  oklch(0.18 0.012 264 / 0.74);
  --tip-bg:     oklch(0.13 0.012 264);
  --scroll-thumb: var(--line-strong);
  --selection: var(--brand-soft);

  /* ---- Chart-only helper tokens (verbatim from the original chart hexes) ---- */
  --chart-grid:       rgba(255,255,255,0.06);
  --chart-axis:       #7c8696;
  --chart-tip-border: rgba(255,255,255,0.1);
  --chart-tip-label:  #8b94a3;
  --chart-cursor:     rgba(255,255,255,0.2);

  color-scheme: dark;
}