/* Causalytics design tokens — the single source of truth for colour, type,
   spacing and radius. Three layers, in the QuantumBlack Design System shape:
   primitives → semantic roles → (components live in constructpolicies.css).
   Component code references semantic tokens only; never a primitive or a hex. */

:root {
  /* ── Primitives ─────────────────────────────────────────────────────── */
  /* Two neutrals as RGB triples so every grey is derived by alpha. */
  --n-ink: 18 19 23;        /* near-black, warm */
  --n-paper: 255 255 255;   /* white */
  --n-mist: 245 245 247;    /* off-white panel */
  --n-mist-2: 236 236 240;  /* deeper panel */
  --n-accent: 207 88 63;    /* brand rust — mark and focus only */

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Roboto Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Type ramp: size / paired line-height. Nothing outside this list. */
  --fs-12: 12px; --lh-12: 16px;
  --fs-14: 14px; --lh-14: 20px;
  --fs-16: 16px; --lh-16: 24px;
  --fs-18: 18px; --lh-18: 28px;
  --fs-20: 20px; --lh-20: 28px;
  --fs-24: 24px; --lh-24: 32px;
  --fs-32: 32px; --lh-32: 40px;
  --fs-40: 40px; --lh-40: 48px;
  --fs-48: 48px; --lh-48: 56px;
  --fs-56: 56px; --lh-56: 64px;
  --fs-72: 72px; --lh-72: 80px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Tracking is near zero; large sizes tighten slightly, small sizes open. */
  --ls-display: -0.015em;
  --ls-heading: -0.008em;
  --ls-body: 0;
  --ls-small: 0.01em;
  --ls-eyebrow: 0.08em;

  /* Spacing: 4px grid. */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;

  /* Radius: rounded system, one pill. */
  --rad-sm: 6px;
  --rad-md: 12px;
  --rad-lg: 20px;
  --rad-xl: 28px;
  --rad-pill: 9999px;

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* ── Semantic roles (light surface) ──────────────────────────────────── */
  --text-primary:   rgb(var(--n-ink) / .92);
  --text-secondary: rgb(var(--n-ink) / .64);
  --text-tertiary:  rgb(var(--n-ink) / .48);
  --text-disabled:  rgb(var(--n-ink) / .36);
  --text-inverse:   rgb(var(--n-paper) / .94);

  --border-divider:   rgb(var(--n-ink) / .08);
  --border-secondary: rgb(var(--n-ink) / .14);
  --border-primary:   rgb(var(--n-ink) / .28);
  --border-active:    rgb(var(--n-ink) / .92);

  --fill-primary: rgb(var(--n-ink) / .92);   /* primary button */
  --fill-muted:   rgb(var(--n-ink) / .06);   /* secondary button, chips */
  --fill-subtle:  rgb(var(--n-ink) / .035);  /* code, quiet panels */

  --surface-base:      rgb(var(--n-paper));
  --surface-secondary: rgb(var(--n-mist));
  --surface-tertiary:  rgb(var(--n-mist-2));
  --surface-inverse:   rgb(var(--n-ink));

  --accent:       rgb(var(--n-accent));
  --accent-soft:  rgb(var(--n-accent) / .14);

  /* State layers: painted over a fill as a gradient so the base colour
     stays a single token. Inverse variants for use on dark fills. */
  --state-hover:           rgb(var(--n-ink) / .06);
  --state-pressed:         rgb(var(--n-ink) / .12);
  --state-hover-inverse:   rgb(var(--n-paper) / .10);
  --state-pressed-inverse: rgb(var(--n-paper) / .18);

  --focus-ring: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--accent);

  --shadow-1: 0 1px 2px rgb(var(--n-ink) / .06), 0 1px 1px rgb(var(--n-ink) / .04);
  --shadow-2: 0 4px 12px rgb(var(--n-ink) / .08), 0 1px 3px rgb(var(--n-ink) / .06);

  /* ── Legacy aliases ──────────────────────────────────────────────────── */
  /* styles.css (archived healthcare pages) still reads these names. They
     now resolve to the semantic layer, so there is one palette site-wide. */
  --ink: var(--text-primary);
  --ink-soft: var(--text-secondary);
  --paper: var(--surface-secondary);
  --surface: var(--surface-base);
  --line: var(--border-secondary);
  --blue: var(--text-primary);
  --blue-dark: var(--text-primary);
  --signal: var(--accent);
  --mono: var(--font-mono);
  --sans: var(--font-sans);
}

/* Inside an inverse surface the same roles flip to the paper triple. */
.is-inverse, .cp-dark {
  --text-primary:   rgb(var(--n-paper) / .94);
  --text-secondary: rgb(var(--n-paper) / .68);
  --text-tertiary:  rgb(var(--n-paper) / .50);
  --border-divider:   rgb(var(--n-paper) / .10);
  --border-secondary: rgb(var(--n-paper) / .18);
  --border-primary:   rgb(var(--n-paper) / .32);
  --fill-muted:  rgb(var(--n-paper) / .10);
  --fill-subtle: rgb(var(--n-paper) / .06);
  --state-hover:   var(--state-hover-inverse);
  --state-pressed: var(--state-pressed-inverse);
  --focus-ring: 0 0 0 2px var(--surface-inverse), 0 0 0 4px var(--accent);
}