/*
 * tokens.css — Hearth design tokens (single source of truth).
 *
 * Direction: "Home Map" (dual-surface) — chosen from the landing prototype
 * (variant C). A warm-dark, ember-lit STAGE for high-impact moments (marketing,
 * hero headers, onboarding, empty states, the Digest header) layered over a
 * warm-light CREAM working surface for the daily app (dashboards, item lists,
 * forms, inventory). Bold Space Grotesk display + Inter body; ember is the
 * accent on both surfaces. See ADR-0010 (token-driven CSS) and ADR-0011
 * (visual direction) / .impeccable.md.
 *
 * Cascade: tokens.css -> ui.css -> section sheets + styleguide.css.
 * Everything downstream consumes the *semantic* tokens (--color-*, --space-*,
 * --text-*…), never the raw palette. Re-theming means editing values here.
 *
 * Contrast: ember and the bright base hues are tuned for fills/decoration and
 * for text-on-dark; the *-ink variants carry text on the light surface. Every
 * pairing the components produce is held to WCAG AA (>= 4.5:1).
 */

:root {
  /* ----- Type families ----------------------------------------------------
     Space Grotesk (geometric display) + Inter (body), each with a system
     fallback so the UI is legible before/without the web fonts. */
  --font-display: "Space Grotesk", "Inter", -apple-system, system-ui, sans-serif;
  --font-sans: "Inter", -apple-system, "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace;

  /* ----- Raw palette — do not reference directly in components ------------- */

  /* Light "paper" working surface */
  --paper: #faf4ea;
  --paper-raised: #fffaf3;
  --paper-sunk: #f1e6d3;
  --cream-glow: #fff7ec;

  /* Dark "stage" signature surface */
  --noche: #1b1410;
  --noche-raised: #251c16;
  --noche-sunk: #140f0b;
  --stage-panel: #2f241c;
  --stage-line: #3c2e23;

  /* Ink — text on the light surface */
  --ink: #2c241d;
  --ink-soft: #695849;    /* AA on paper as muted body */
  --ink-faint: #786650;   /* AA-borderline: large / secondary text only */

  /* Cream — text on the dark stage */
  --cream: #f6ecdc;
  --cream-muted: #c3b3a0;
  --cream-faint: #9a8a78;

  /* Ember — the brand accent */
  --ember: #ff8b3d;       /* bright: fills, decoration, accents, text-on-dark */
  --ember-deep: #e0701f;
  --ember-ink: #b04e12;   /* ember as TEXT on the light surface (AA on paper) */
  --ember-tint: #ffece1;  /* solid pale bg for ember status (clears AA with --ember-ink) */

  /* Teal — calm positive ("scheduled", "on track", "done") */
  --teal: #38a392;        /* fills / text-on-dark */
  --teal-ink: #156152;    /* teal as text on the light surface (AA) */
  --teal-tint: #d7efe8;   /* solid pale bg for teal status (clears AA with --teal-ink) */

  /* Honey — warm attention (warranty / due-soon nudges; reassuring, not alarm) */
  --honey: #e7a830;
  --honey-tint: #fbe7a8;
  --honey-ink: #6e4e12;   /* text on honey-tint (AA) */

  /* Danger — reserved for destructive actions and errors, used sparingly */
  --danger: #c0432e;
  --danger-ink: #a3331f;  /* danger as text on the light surface (AA) */

  /* Hairline on the light surface */
  --hairline: #e9dcc6;

  /* ----- Semantic colors — the only colors components should use ---------- */

  /* Light working surface (default) */
  --color-bg: var(--paper);
  --color-surface: var(--paper-raised);
  --color-surface-sunk: var(--paper-sunk);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-soft);
  --color-text-faint: var(--ink-faint);
  --color-border: var(--hairline);

  /* Dark stage (opt in via the .stage utility in ui.css) */
  --color-stage: var(--noche);
  --color-stage-raised: var(--stage-panel);
  --color-stage-sunk: var(--noche-sunk);
  --color-on-stage: var(--cream);
  --color-on-stage-muted: var(--cream-muted);
  --color-on-stage-faint: var(--cream-faint);
  --color-stage-border: var(--stage-line);

  /* Brand accents */
  --color-primary: var(--ember);        /* fills / accents */
  --color-primary-ink: var(--ember-ink); /* ember as text on light */
  --color-on-primary: var(--noche);      /* text on an ember fill (dark-on-ember = AA) */
  --color-eyebrow: var(--ember-ink);     /* eyebrow/label text on light */
  --color-secondary: var(--teal);
  --color-secondary-ink: var(--teal-ink);
  --color-accent: var(--honey);

  /* Status — calm-first (overdue uses honey/attention, not red) */
  --color-success: var(--teal);
  --color-success-ink: var(--teal-ink);
  --color-success-bg: var(--teal-tint);
  --color-due-bg: var(--ember-tint);
  --color-attention-bg: var(--honey-tint);
  --color-attention-ink: var(--honey-ink);
  --color-danger: var(--danger);
  --color-danger-ink: var(--danger-ink);

  /* Overlay scrims & the dark stage */
  --color-scrim: rgb(20 15 11 / 55%);
  --color-scrim-strong: rgb(20 15 11 / 88%);

  /* ----- Type scale ------------------------------------------------------- */
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.8125rem;   /* 13 */
  --text-base: 1rem;      /* 16 */
  --text-md: 1.125rem;    /* 18 */
  --text-lg: 1.375rem;    /* 22 */
  --text-xl: 1.75rem;     /* 28 */
  --text-2xl: 2.25rem;    /* 36 */
  --text-3xl: 3rem;       /* 48 */
  --text-display: clamp(2.5rem, 7vw, 4.5rem); /* 40 -> 72 */
  --leading-tight: 1.02;
  --leading-snug: 1.22;
  --leading-normal: 1.55;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-tight: -0.02em;
  --tracking-display: -0.03em;
  --tracking-eyebrow: 0.16em;

  /* ----- Spacing (4px base) ----------------------------------------------- */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */

  /* ----- Radii — the Home-map look is generously rounded ------------------ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ----- Elevation — warm-tinted shadows ---------------------------------- */
  --shadow-sm: 0 8px 22px rgb(44 36 29 / 9%);
  --shadow-md: 0 18px 40px rgb(44 36 29 / 14%);
  --shadow-lg: 0 28px 64px rgb(44 36 29 / 18%);
  --shadow-primary: 0 16px 40px color-mix(in srgb, var(--ember) 32%, transparent);
  --shadow-stage: 0 24px 60px rgb(10 7 5 / 45%);

  /* ----- Motion ----------------------------------------------------------
     Exponential ease-out for natural deceleration (not bare `ease`). */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 130ms var(--ease-out);
  --transition: 200ms var(--ease-out);

  /* ----- Layout ----------------------------------------------------------- */
  --container: 1100px;
  --container-narrow: 720px;
  --container-wide: 1240px;
  --page-gutter: var(--space-6);

  /* ----- Z-index ---------------------------------------------------------- */
  --z-header: 100;
  --z-overlay: 1000;
  --z-toast: 1100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition: 0ms;
  }
}