/* ============================================================================
   Foundation Demo - design tokens.

   FILL THIS IN FIRST, before any component CSS. Every colour, size and duration
   in the app comes from here. If a component file contains a raw hex, it is a bug.

   Aesthetic direction: light instrument panel: putty ground, ink type, one safety-orange action colour, status colours reserved for sync state (e.g. "forged steel, cinematic dark:
   near-black iron base, layered steel surfaces with grain, a SINGLE ember-gold
   accent used sparingly").

   A DELIBERATE ONE-OFF (Ethan, 20 Sep 2026), to be thrown away. Light on purpose: every
   other app on his home screen is dark, so this can never be mistaken for Iron Forged, VRSN
   or Blueprint. Green / amber / red mean SYNC STATE here and nothing else; orange means
   "this is the thing to press". Square corners and hard 1px shadows: an instrument, not a
   product.

   This is the CLIENT's brand, not Evans purple. Evans purple is scoped to the
   VOICE AI side of the business only (21 Aug 2026) - never a default here.
   ============================================================================ */

:root {
  /* ---- Base + surfaces. Layered, not one flat colour. ---- */
  --bg-000: #DCD8CF;    /* deepest: page base, vignette */
  --bg-050: #E9E6DF;    /* main background */
  --surface-100: #F3F1EC;
  --surface-200: #FAF9F6;   /* raised */
  --surface-300: #FFFFFF;   /* hover / raised-2 */
  --surface-400: #FFFFFF;   /* input / inset */

  /* ---- Hairlines ---- */
  --line-soft: #D6D2C8;
  --line: #BDB8AC;
  --line-strong: #16181A;

  /* ---- Text ---- */
  --text-primary: #16181A;
  --text-secondary: #4A4E52;
  --text-muted: #777B7F;
  --text-faint: #A3A6A8;

  /* ---- THE accent. One hue, used sparingly: CTAs, focus rings, key numerals.
         A second hero colour halves the impact of both. ---- */
  --accent: #E4572E;
  --accent-hot: #EE6A43;      /* hover / highlight */
  --accent-bright: #F58A68;   /* peak moment */
  --accent-deep: #BF4220;     /* pressed */
  --accent-ink: #FFFFFF;      /* text on accent fills */
  --accent-glow: rgba(228, 87, 46, 0.28);
  --accent-glow-soft: rgba(228, 87, 46, 0.12);

  /* ---- Status. Deliberately desaturated so the accent stays hero. Use the -dim
         value as a wash BEHIND a cell, never as a flat fill. ---- */
  --ok: #2F7D4F;
  --ok-dim: rgba(47, 125, 79, 0.14);
  --warn: #A86A00;
  --warn-dim: rgba(168, 106, 0, 0.14);
  --danger: #B3261E;
  --danger-dim: rgba(179, 38, 30, 0.12);

  /* ---- Type. Pair a display face with a precise UI face. Never Inter, Roboto,
         Arial or a system stack: that is the generic-AI tell. ---- */
  --font-display: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --font-ui: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  --font-num: var(--font-ui);   /* tabular numerals for anything measured */

  --fs-hero: clamp(2rem, 6vw, 3.5rem);
  --fs-h1: clamp(1.5rem, 4vw, 2.25rem);
  --fs-h2: 1.25rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  /* ---- Spacing: one scale, no arbitrary values ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-full: 999px;

  /* ---- Depth ---- */
  --shadow-1: 0 1px 0 rgba(22,24,26,.10);
  --shadow-2: 0 2px 0 rgba(22,24,26,.14);
  --shadow-3: 0 10px 30px rgba(22,24,26,.18);

  /* ---- Motion. Fast enough not to be waited on. ---- */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 360ms;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* ---- Bridge to the shared core (css/core.css, css/oops.css). Those files carry NO brand
         colours: every one is var(--core-*, <neutral fallback>). Map them to THIS palette
         here, once, or the offline pill, the stale bar, the error modal and the toast come
         out grey beside an otherwise branded app. Never edit core.css or oops.css. ---- */
  --core-accent: var(--accent);
  --core-on-accent: var(--accent-ink);
  --core-ring: var(--accent-glow);
  --core-surface-1: var(--surface-100);
  --core-surface-2: var(--surface-200);
  --core-line: var(--line);
  --core-line-2: var(--line-strong);
  --core-text-1: var(--text-primary);
  --core-text-2: var(--text-secondary);
  --core-text-3: var(--text-muted);
  --core-ok: var(--ok);
  --core-warn: var(--warn);
  --core-scrim: rgba(22, 24, 26, 0.45);
  --core-toast-bg: var(--text-primary);
  --core-toast-text: var(--bg-050);
  --core-radius: var(--r-md);

  /* ---- Safe areas: every fixed bar on a PWA needs these or iOS clips it ---- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}