/* GENERATED from tokens.json by build.mjs — do not hand-edit.
 * Brand: heal-better · Colour values: REAL — measured from production
 * Generated: 2026-10-22
 *
 * THE THEMING CONTRACT (tokens.json → theme). Three user-facing states, two
 * rendered themes:
 *
 *   auto   no data-theme attribute  → follows prefers-color-scheme
 *   light  html[data-theme="light"] → light, whatever the OS says
 *   dark   html[data-theme="dark"]  → dark, whatever the OS says
 *
 * Absence is the default on purpose: a first-time visitor gets their own OS
 * preference with nothing stored, and "auto" is a real state rather than a
 * guess written into storage on first load.
 *
 * The three blocks below must stay in this order. The light base defines
 * EVERY token — a token defined only inside the media query or only inside
 * the attribute selector resolves to nothing in the other theme. The media
 * query is guarded by :not([data-theme="light"]) so an explicit light choice
 * beats a dark OS, and the attribute block repeats dark so an explicit dark
 * choice beats a light OS. Both directions, or the toggle only works one way.
 */

:root {
  color-scheme: light;
  --color-canvas: #ffffff;
  --color-backdrop: #f4f6f9;
  --color-surface: #ffffff;
  --color-surface-sunk: #fafafa;
  --color-surface-raised: #ffffff;
  --color-border: #ebeff7;
  --color-border-strong: #dddddd;
  --color-text: #1b1b1b;
  --color-text-muted: #757575;
  --color-text-disabled: #c6c6c6;
  --color-accent: #2f6de2;
  --color-accent-ink: #204a9a;
  --color-accent-tint: #eff5ff;
  --color-accent-border: #b4caf5;
  --color-on-accent: #ffffff;
  --color-success: #187a3d;
  --color-success-bg: #e6f9ec;
  --color-success-border: #b2e3c1;
  --color-danger: #cb5050;
  --color-danger-bg: #fdeaea;
  --color-danger-ink: #b84343;
  --color-attention: #c26a12;
  --color-attention-ink: #8a4a06;
  --color-attention-tint: #fff4e8;
  --color-scrim: rgb(27 27 27 / 0.32);
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --type-family-sans: 'Poppins', system-ui, -apple-system, sans-serif;
  --type-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --type-size-xs: 0.75rem;
  --type-size-sm: 0.875rem;
  --type-size-base: 1rem;
  --type-size-lg: 1.125rem;
  --type-size-xl: 1.5rem;
  --type-size-2xl: 2rem;
  --type-size-3xl: 3rem;
  --type-size-4xl: 4rem;
  --type-weight-regular: 400;
  --type-weight-medium: 500;
  --type-weight-bold: 700;
  --type-leading-tight: 1.2;
  --type-leading-normal: 1.5;
  --type-leading-loose: 1.75;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgb(20 30 50 / 0.05);
  --shadow-md: 0 4px 12px rgb(20 30 50 / 0.08);
  --shadow-overlay: 0 20px 60px rgb(15 23 42 / 0.3);
  --layout-page-narrow: 55rem;
  --layout-page-wide: 65rem;
  --layout-block-gap: 1.25rem;
  --layout-block-pad: 1.75rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-canvas: #101418;
    --color-backdrop: #0b0f13;
    --color-surface: #171c22;
    --color-surface-sunk: #1e242b;
    --color-surface-raised: #222932;
    --color-border: #262d36;
    --color-border-strong: #3a424c;
    --color-text: #e8ebef;
    --color-text-muted: #a6aeb8;
    --color-text-disabled: #5a626b;
    --color-accent: #6e9df0;
    --color-accent-ink: #afc9fa;
    --color-accent-tint: #162033;
    --color-accent-border: #2d4370;
    --color-on-accent: #0b0e12;
    --color-success: #3fbe72;
    --color-success-bg: #0f2a1a;
    --color-success-border: #1f4a32;
    --color-danger: #f0736e;
    --color-danger-bg: #2e1618;
    --color-danger-ink: #ff9a93;
    --color-attention: #e8954a;
    --color-attention-ink: #f5bd85;
    --color-attention-tint: #2b1e10;
    --color-scrim: rgb(0 0 0 / 0.62);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 14px rgb(0 0 0 / 0.5);
    --shadow-overlay: 0 20px 60px rgb(0 0 0 / 0.68);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #101418;
  --color-backdrop: #0b0f13;
  --color-surface: #171c22;
  --color-surface-sunk: #1e242b;
  --color-surface-raised: #222932;
  --color-border: #262d36;
  --color-border-strong: #3a424c;
  --color-text: #e8ebef;
  --color-text-muted: #a6aeb8;
  --color-text-disabled: #5a626b;
  --color-accent: #6e9df0;
  --color-accent-ink: #afc9fa;
  --color-accent-tint: #162033;
  --color-accent-border: #2d4370;
  --color-on-accent: #0b0e12;
  --color-success: #3fbe72;
  --color-success-bg: #0f2a1a;
  --color-success-border: #1f4a32;
  --color-danger: #f0736e;
  --color-danger-bg: #2e1618;
  --color-danger-ink: #ff9a93;
  --color-attention: #e8954a;
  --color-attention-ink: #f5bd85;
  --color-attention-tint: #2b1e10;
  --color-scrim: rgb(0 0 0 / 0.62);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 14px rgb(0 0 0 / 0.5);
  --shadow-overlay: 0 20px 60px rgb(0 0 0 / 0.68);
}