/* Nervous System Reset: design tokens v0.1 (Design Grok, 2026-10-18)
   Evolves the palette already in /home/box/apps/nervous-system-reset/styles.css. Same hues; a few values
   nudged so every text pair passes WCAG 2.2 AA 4.5:1 and every control/state indicator passes 3:1.
   Verify with: python3 contrast.py --proposed
   Theme switching works as it does today: html[data-theme="dark" | "light" | "auto"].
   DARK is the default (SPEC §2). Values are hex on purpose so the checker can read them. */

/* ---------- DARK (default) ---------- */
:root {
  color-scheme: dark;
  /* surfaces: lighter = closer to the user (HIG "base" vs "elevated") */
  --color-bg: #0f1417;          /* page */
  --color-surface: #172026;     /* cards, inputs, secondary buttons */
  --color-surface-2: #1f2a31;   /* soft cards, pills, toast */
  --color-surface-3: #26333b;   /* sheets / dialogs (crisis card) */
  /* text */
  --color-text: #e7eef0;
  --color-text-muted: #9aaab0;  /* hints, meta, ghost buttons, scale labels */
  --color-text-subtle: #8a9aa0; /* tertiary only (locked tool notes); bg..surface-2 only, never on surface-3 */
  --color-text-disabled: #707f85; /* inactive controls (WCAG-exempt, kept >=3:1 anyway) */
  /* lines */
  --color-border: #2a363d;        /* decorative dividers + card edges ONLY (not a control indicator) */
  --color-border-strong: #6a7a81; /* control boundaries: inputs, unselected chips, empty day rings, timer track */
  /* brand / action */
  --color-accent: #7cc4b4;
  --color-accent-pressed: #6ab3a3;
  --color-on-accent: #0b1a17;
  --color-accent-text: #7cc4b4;   /* links, active nav label, "today" ring */
  --color-accent-tint: #273b3a;   /* = accent 22% over bg; "done" pill */
  --color-focus: #b9e6dc;         /* 2px focus ring, 2px offset (sits on the page/card colour) */
  /* valence */
  --color-happy: #e8c57a;  --color-on-happy: #1b1503;  --color-happy-text: #e8c57a;
  --color-hard:  #8fa8d8;  --color-on-hard:  #0b1430;  --color-hard-text:  #8fa8d8;
  /* status */
  --color-danger-text: #ee8888;   /* "Delete all my data" label */
  /* graphics */
  --color-breath: #507e75;        /* = accent 60% over bg; breathing circle */
  --color-chart-calm: var(--color-hard);
  --color-chart-mood: var(--color-happy);
  --color-scrim: rgba(0, 0, 0, 0.6);

  /* elevation: dark mode relies on surface lightness; shadows only for floating layers */
  --shadow-1: none;
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 8px 28px rgba(0, 0, 0, 0.45);

  /* ---------- typography ----------
     Root = 17px (iOS body default). On Safari the root follows the user's Text Size (Dynamic Type),
     see the @supports block below, so everything in rem scales with it. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang HK", "Noto Sans HK", sans-serif;
  --fs-caption: calc(13rem / 17);   /* 13px  scale labels, meta, day labels, legend */
  --fs-footnote: calc(15rem / 17);  /* 15px  .small, pills, nav labels, helper text */
  --fs-body: 1rem;                  /* 17px  body, buttons, inputs */
  --fs-lead: calc(20rem / 17);      /* 20px  calming lines, win line, big buttons */
  --fs-script: calc(22rem / 17);    /* 22px  exercise / breath script line */
  --fs-title-2: calc(22rem / 17);   /* 22px  semibold section / step question (h2) */
  --fs-title-1: calc(28rem / 17);   /* 28px  screen title (h1) */
  --fs-display: calc(44rem / 17);   /* 44px  timer numeral (light weight) */
  --lh-tight: 1.25;  --lh-snug: 1.35;  --lh-body: 1.5;  --lh-relaxed: 1.45;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-light: 300;
  --fs-chart: 11px;                 /* minimum rendered size for SVG chart labels (HIG iOS min 11pt) */

  /* ---------- spacing (4-pt grid) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --gutter: var(--space-5);          /* page side padding (was 18px) */
  --content-max: 520px;

  /* ---------- sizing ---------- */
  --tap-min: 48px;      /* hard floor for any standalone target (HIG 44pt, M3 48dp) */
  --tap: 56px;          /* default control height (unchanged) */
  --tap-lg: 72px;       /* big primary / valence (was 76/84) */
  --nav-h: 64px;        /* tab bar height above the safe area */
  --action-bar-h: calc(var(--tap-lg) + var(--space-4) * 2);

  /* ---------- radii ---------- */
  --radius-xs: 4px;     /* progress segments */
  --radius-control: 14px; /* chips, inputs, list rows, toast */
  --radius-button: 16px;
  --radius-card: 18px;
  --radius-sheet: 24px;
  --radius-pill: 999px;

  /* ---------- motion (Material 3 easing & duration tokens) ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-breath: cubic-bezier(0.37, 0, 0.63, 1); /* symmetric sine-like, for breathing only */
  --dur-instant: 100ms;  /* press feedback */
  --dur-short: 200ms;    /* chip/selection change, focus ring */
  --dur-medium: 300ms;   /* screen cross-fade, toast in */
  --dur-long: 500ms;     /* sheet open */
  --dur-script-fade: 400ms; /* exercise script line change (existing value) */
  --breath-in: 4s;  --breath-out: 6s;  /* from content/bad_day_breath.md DEV NOTE */
  --press-scale: 0.985;
}

/* ---------- LIGHT ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f4f1ec;
  --color-surface: #ffffff;
  --color-surface-2: #ece8e1;
  --color-surface-3: #ffffff;
  --color-text: #1f2a2e;
  --color-text-muted: #56646a;     /* was #5d6b70 (4.52:1 on surface-2, too tight) */
  --color-text-subtle: #56646a;    /* light mode has no room for a third grey */
  --color-text-disabled: #7f8687;
  --color-border: #dcd6cc;
  --color-border-strong: #7f8687;
  --color-accent: #287060;         /* was #2f7d6d (4.36:1 as text on bg) */
  --color-accent-pressed: #225f52;
  --color-on-accent: #ffffff;
  --color-accent-text: #287060;
  --color-accent-tint: #d0dad4;
  --color-focus: #1d574c;
  --color-happy: #a87a12;  --color-on-happy: #1b1503;  --color-happy-text: #86610e;
  --color-hard:  #3f5f9e;  --color-on-hard:  #ffffff;  --color-hard-text:  #3f5f9e; /* on-hard was #0b1430 (2.89:1) */
  --color-danger-text: #b3261e;    /* was #e88 (2.47:1 on white) */
  --color-breath: #5b9184;
  --color-scrim: rgba(20, 28, 31, 0.45);
  --shadow-1: 0 1px 2px rgba(31, 42, 46, 0.06);
  --shadow-2: 0 2px 8px rgba(31, 42, 46, 0.10);
  --shadow-3: 0 8px 28px rgba(31, 42, 46, 0.16);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    color-scheme: light;
    --color-bg: #f4f1ec; --color-surface: #ffffff; --color-surface-2: #ece8e1; --color-surface-3: #ffffff;
    --color-text: #1f2a2e; --color-text-muted: #56646a; --color-text-subtle: #56646a; --color-text-disabled: #7f8687;
    --color-border: #dcd6cc; --color-border-strong: #7f8687;
    --color-accent: #287060; --color-accent-pressed: #225f52; --color-on-accent: #ffffff; --color-accent-text: #287060;
    --color-accent-tint: #d0dad4; --color-focus: #1d574c;
    --color-happy: #a87a12; --color-on-happy: #1b1503; --color-happy-text: #86610e;
    --color-hard: #3f5f9e; --color-on-hard: #ffffff; --color-hard-text: #3f5f9e;
    --color-danger-text: #b3261e; --color-breath: #5b9184; --color-scrim: rgba(20, 28, 31, 0.45);
    --shadow-1: 0 1px 2px rgba(31, 42, 46, 0.06); --shadow-2: 0 2px 8px rgba(31, 42, 46, 0.10); --shadow-3: 0 8px 28px rgba(31, 42, 46, 0.16);
  }
}

/* ---------- root type: honour iOS Text Size ---------- */
html { font-size: 106.25%; } /* 17px when the browser default is 16px */
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; } /* Safari: 17px at the default Text Size, scales with the user setting */
}

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; --dur-short: 0ms; --dur-medium: 0ms; --dur-long: 0ms;
    --press-scale: 1;
    /* breathing keeps its 4 s / 6 s timing but switches from scaling to a slow fill change (see design-system.md §7.9) */
  }
}

/* ---------- backwards-compatible aliases (lets Code Grok swap tokens in without touching every rule) ---------- */
:root, :root[data-theme] {
  --bg: var(--color-bg); --surface: var(--color-surface); --surface2: var(--color-surface-2);
  --text: var(--color-text); --muted: var(--color-text-muted); --accent: var(--color-accent);
  --accent-ink: var(--color-on-accent); --happy: var(--color-happy); --hard: var(--color-hard);
  --line: var(--color-border); --radius: var(--radius-card);
}