/**
 * Vaubaan design tokens — the quiet control room.
 *
 * Spec: docs/spec/style-guide.md. Decision: docs/decisions/
 * interface-redesign-vocabulary-and-design-system.md.
 *
 * One layer of named decisions. A component reads these and nothing else: no
 * raw colour, no raw type size, no raw radius.
 *
 * Themes. Light is the default. Dark applies when the document (or any
 * element: the gallery shows both side by side) carries `data-theme="dark"`,
 * or when no theme is chosen and the system prefers dark. The two dark blocks
 * below hold the same values; `tests/unit/app/design-tokens.test.ts` keeps
 * them identical and checks the contrast of every documented pair.
 */

:root {
  /* ───── Type: four sizes, two weights ───── */
  --font-sans:
    var(--font-geist-sans), -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
    sans-serif;
  --font-mono:
    var(--font-geist-mono), ui-monospace, 'SF Mono', Menlo, 'Liberation Mono', Consolas, monospace;

  --text-xs: 0.75rem; /* 12 px — meta, captions, chips */
  --text-sm: 0.8125rem; /* 13 px — rows, tables, controls */
  --text-base: 0.875rem; /* 14 px — body, section headings */
  --text-title: 1.25rem; /* 20 px — the page title, the one statement of a request */

  --weight-regular: 400;
  --weight-strong: 600;

  --leading: 1.5;
  --leading-tight: 1.3;
  --tracking-title: -0.01em;

  /* Prose is capped so that a line stays under about 75 characters. */
  --measure: 680px;

  /* ───── Space: a 4 px base, then the rhythm of a page ───── */
  --space-half: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --page-max: 1120px;
  --page-max-narrow: 860px;
  --page-max-wide: 1240px;
  --page-pad-x: 44px;
  --page-pad-top: 28px;
  --page-pad-bottom: 72px;
  /* Between two sections of a page: whitespace separates before any border does. */
  --section-gap: 36px;
  --side-width: 220px;
  --side-width-collapsed: 56px;

  /* A quiet list row and a table cell. */
  --row-y: 11px;
  --cell-y: 9px;
  --cell-x: 10px;

  /* The three heights of a control. */
  --control-sm: 26px;
  --control-md: 30px;
  --control-lg: 36px;

  /* ───── Radius ───── */
  --radius-sm: 4px; /* tags, checkboxes, inline code */
  --radius-md: 6px; /* buttons, inputs, navigation entries */
  --radius-lg: 10px; /* the one filled box of a page, callouts, dialogs, code blocks */
  --radius-full: 999px; /* pills, avatars, dots */

  /* ───── Motion ───── */
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ───── Marks: the hues an avatar or a service mark takes; never a status ───── */
  --hue-1: #5b6abf;
  --hue-2: #3a7f60;
  --hue-3: #a8602f;
  --hue-4: #7a5ba8;
  --hue-5: #a4566b;
  --hue-0: #73767d;
  --on-hue: #ffffff;
}

/* ───── Light (default) ───── */
:root,
[data-theme='light'] {
  color-scheme: light;

  /* Paper */
  --paper: #ffffff; /* the page */
  --paper-side: #f6f6f4; /* the side navigation, a dialog foot, a group row */
  --paper-raised: #ffffff; /* controls, the rail card, dialogs */
  --fill: #f3f3f0; /* the current navigation entry, a neutral pill, inline code */
  --hover: #fafaf8;

  /* Hairlines */
  --line: #e6e5e1;
  --line-strong: #d2d1cc;

  /* Ink */
  --ink: #1b1c1e;
  --ink-2: #4f5156;
  --ink-3: #6a6d74;
  --ink-4: #a4a6ab; /* placeholders and disabled marks only: below AA on purpose */

  /* The one accent: the primary action and links */
  --accent: #2f55c7;
  --accent-ink: #2448b0;
  --accent-soft: #eef2fc;
  --accent-line: #c9d5f5;
  --on-accent: #ffffff;

  /* Exceptions: a status is coloured only when it differs from normal */
  --ok: #1c7c4a;
  --ok-soft: #e7f4ec;
  --ok-line: #bfe3cc;
  --warn: #a35e00; /* needs you */
  --warn-soft: #fbf2df;
  --warn-line: #eed9ae;
  --on-warn: #ffffff;
  --bad: #b3261e; /* stopped, refused, limit reached */
  --bad-soft: #fbebe9;
  --bad-line: #f3c9c4;

  /* Code blocks keep a dark surface in both themes */
  --code-bg: #1e1f22;
  --code-ink: #e7e7e4;
  --code-dim: #8b8e95;
  --code-key: #9cc4ff;
  --code-string: #c8e6a8;
  --code-btn: #2a2b2f;
  --code-btn-line: #3a3b40;

  /* Overlays */
  --scrim: rgba(20, 20, 22, 0.38);
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06);
  --knob: #ffffff;

  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
}

/* ───── Dark, chosen ───── */
[data-theme='dark'] {
  color-scheme: dark;

  --paper: #0f1115;
  --paper-side: #15181d;
  --paper-raised: #15181d;
  --fill: #1c2026;
  --hover: #1a1d23;

  --line: #272b32;
  --line-strong: #363b44;

  --ink: #e8e9ec;
  --ink-2: #b9bcc4;
  --ink-3: #8a8f99;
  --ink-4: #5e636c;

  --accent: #7fa3ff;
  --accent-ink: #9db8ff;
  --accent-soft: #1e2433;
  --accent-line: #364467;
  --on-accent: #0f1115;

  --ok: #4cc38a;
  --ok-soft: #182a25;
  --ok-line: #244f3e;
  --warn: #e9b04a;
  --warn-soft: #30291d;
  --warn-line: #66512a;
  --on-warn: #0f1115;
  --bad: #f0655f;
  --bad-soft: #2f1d1f;
  --bad-line: #693333;

  --code-bg: #0b0c0f;
  --code-ink: #e2e3e6;
  --code-dim: #7e838c;
  --code-key: #9cc4ff;
  --code-string: #b8dd98;
  --code-btn: #1c2026;
  --code-btn-line: #363b44;

  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --knob: #ffffff;

  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
}

/* ───── Dark, from the system: the same values, when no theme is chosen ───── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --paper: #0f1115;
    --paper-side: #15181d;
    --paper-raised: #15181d;
    --fill: #1c2026;
    --hover: #1a1d23;

    --line: #272b32;
    --line-strong: #363b44;

    --ink: #e8e9ec;
    --ink-2: #b9bcc4;
    --ink-3: #8a8f99;
    --ink-4: #5e636c;

    --accent: #7fa3ff;
    --accent-ink: #9db8ff;
    --accent-soft: #1e2433;
    --accent-line: #364467;
    --on-accent: #0f1115;

    --ok: #4cc38a;
    --ok-soft: #182a25;
    --ok-line: #244f3e;
    --warn: #e9b04a;
    --warn-soft: #30291d;
    --warn-line: #66512a;
    --on-warn: #0f1115;
    --bad: #f0655f;
    --bad-soft: #2f1d1f;
    --bad-line: #693333;

    --code-bg: #0b0c0f;
    --code-ink: #e2e3e6;
    --code-dim: #7e838c;
    --code-key: #9cc4ff;
    --code-string: #b8dd98;
    --code-btn: #1c2026;
    --code-btn-line: #363b44;

    --scrim: rgba(0, 0, 0, 0.6);
    --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --knob: #ffffff;

    --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
  }
}