/* ==========================================================================
   Design tokens — docs/09-design-system.md
   Dark and light are designed as a pair, not derived. Every colour, space,
   radius and elevation used anywhere in the app resolves to a token here.
   The accent (--signal, --signal-soft, --accent-ink) is re-written at runtime
   by theme.js when an organisation supplies its own brand colour.
   ========================================================================== */

:root {
  /* Density multiplier — 1 comfortable, 0.8 compact. */
  --dens: 1;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 12px;
  --sp-6: 14px;
  --sp-7: 16px;
  --sp-8: 18px;
  --sp-9: 22px;
  --sp-10: 26px;

  /* Radius */
  --r-chip: 6px;
  --r-control: 9px;
  --r-card: 12px;
  --r-panel: 16px;
  --r-pill: 20px;

  /* Type */
  --font-sans: 'Cairo', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --fs-display: 50px;
  --fs-h1: 22px;
  --fs-h2: 17px;
  --fs-body: 13.5px;
  --fs-read: 16px;
  --fs-label: 11px;
  --fs-mono: 11.5px;

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 250ms;

  /* Scrim shared by both themes */
  --scrim: rgba(4, 12, 14, 0.55);

  /* Brand accent — the single value an organisation overrides. */
  --brand-accent: #4fd8ce;
}

/* ------------------------------- Dark ----------------------------------- */
:root,
[data-theme='dark'] {
  --ground-0: #0a1316;
  --ground-1: #0e1a1f;
  --ground-2: #132026;
  --surface: #152329;
  --surface-2: #1b2e35;

  --line: rgba(127, 243, 234, 0.1);
  --line-strong: rgba(127, 243, 234, 0.2);

  --fg: #e6f2f1;
  --fg-dim: #96b0ad;
  --fg-mute: #5e7876;

  --signal: var(--brand-accent);
  --signal-soft: rgb(from var(--brand-accent) r g b / 0.13);
  --accent-ink: var(--brand-accent);
  --btn-fg: #04211d;

  --st-draft: #aec4c2;
  --st-draft-bg: rgba(143, 169, 167, 0.16);
  --st-scheduled: #5cc7c7;
  --st-scheduled-bg: rgba(46, 158, 158, 0.2);
  --st-approved: #5fe3d9;
  --st-approved-bg: rgba(79, 216, 206, 0.18);
  --st-published: #8ffff4;
  --st-published-bg: rgba(143, 255, 244, 0.15);
  --st-failed: #f0836f;
  --st-failed-bg: rgba(240, 131, 111, 0.16);
  --st-warn: #e6b45c;
  --st-warn-bg: rgba(230, 180, 92, 0.15);

  --shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 10px 30px rgba(0, 0, 0, 0.4);
  --mute-arc: rgba(143, 169, 167, 0.28);
}

/* ------------------------------- Light ---------------------------------- */
[data-theme='light'] {
  --ground-0: #edf3f2;
  --ground-1: #e5edec;
  --ground-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f2f8f7;

  --line: rgba(14, 26, 31, 0.1);
  --line-strong: rgba(14, 26, 31, 0.18);

  --fg: #0c171b;
  --fg-dim: #3c5653;
  --fg-mute: #6e8683;

  --signal: var(--brand-accent);
  --signal-soft: rgb(from var(--brand-accent) r g b / 0.08);
  /* Darkened independently of the brand accent so body text always passes AA. */
  --accent-ink: #0e6b6b;
  --btn-fg: #ffffff;

  --st-draft: #5e7674;
  --st-draft-bg: rgba(94, 118, 116, 0.12);
  --st-scheduled: #0e6b6b;
  --st-scheduled-bg: rgba(14, 107, 107, 0.1);
  --st-approved: #127e79;
  --st-approved-bg: rgba(18, 126, 121, 0.12);
  --st-published: #0a5c57;
  --st-published-bg: rgba(10, 92, 87, 0.12);
  --st-failed: #c6432f;
  --st-failed-bg: rgba(198, 67, 47, 0.1);
  --st-warn: #b0740f;
  --st-warn-bg: rgba(176, 116, 15, 0.12);

  --shadow: 0 1px 2px rgba(14, 26, 31, 0.05), 0 10px 28px rgba(14, 26, 31, 0.08);
  --mute-arc: rgba(110, 134, 131, 0.3);
}

/* `rgb(from ...)` is recent; fall back to a flat tint where it is unsupported
   so the accent-tinted surfaces never collapse to transparent. */
@supports not (color: rgb(from white r g b / 0.1)) {
  :root,
  [data-theme='dark'] { --signal-soft: rgba(79, 216, 206, 0.13); }
  [data-theme='light'] { --signal-soft: rgba(14, 107, 107, 0.08); }
}