/*
  Phase-4 T3 / D9 -- design tokens for the /review page.

  Split from app.css the way planning-console splits its own, so the values sit apart from the rules that
  use them.

  SYSTEM FONTS ONLY. No @font-face, no webfont: `font-src 'self'` forbids it, and a font request from a page
  holding two live secrets is an outbound call worth not having. The stack below is chosen so the page looks
  deliberate on every platform rather than falling back to Times.

  The palette is a slate/ink neutral with a single deep blue accent. One accent, used sparingly, because
  every coloured thing on this page competes with the one irreversible action on it.
*/

:root {
  color-scheme: light dark;

  /* Surfaces, back to front. */
  --canvas: #eef1f5;
  --paper: #ffffff;
  --sunken: #f5f7fa;
  --line: #dde3ea;
  --line-strong: #c3ccd7;

  /* Ink. */
  --ink: #16191d;
  --ink-soft: #4a5560;
  --ink-faint: #6b7784;

  /* One accent. */
  --accent: #12466e;
  --accent-hover: #0e3757;
  --accent-ink: #ffffff;
  --accent-wash: #e8eff6;

  /* Status. */
  --danger: #96231c;
  --danger-wash: #fbeceb;
  --good: #1c6b45;
  --good-wash: #e8f4ee;

  /* Type: a 1.2 scale, capped so nothing shouts. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  /* Spacing: a 4px rhythm. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;

  --radius-sm: 5px;
  --radius: 9px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgb(16 25 35 / 6%), 0 1px 1px rgb(16 25 35 / 4%);
  --shadow: 0 2px 4px rgb(16 25 35 / 5%), 0 8px 24px rgb(16 25 35 / 7%);

  --measure: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0e1216;
    --paper: #171c22;
    --sunken: #1e242b;
    --line: #2b333c;
    --line-strong: #3c4650;

    --ink: #e9edf1;
    --ink-soft: #aeb9c4;
    --ink-faint: #8b96a2;

    --accent: #7fb4dc;
    --accent-hover: #9ac8e9;
    --accent-ink: #0e1216;
    --accent-wash: #1b2a36;

    --danger: #f0938b;
    --danger-wash: #2c1c1b;
    --good: #7cc7a0;
    --good-wash: #16261e;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow: 0 2px 4px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 40%);
  }
}