/*
  CUED UP DESIGN TOKENS

  The single source of every colour, type size, space, radius, shadow and motion value. Component
  CSS reads ONLY the semantic tokens (`--color-*`, `--text-*`, `--space-*`, `--radius-*`,
  `--shadow-*`, ...). The primitive ramps (`--gray-`, `--indigo-`, `--green-`, `--amber-`, `--red-`,
  `--dk-`) exist so the semantic layer has something to point at; nothing outside this file names one.

  Identity: a dense, quiet, keyboard-first work surface. It is carried by density, one indigo accent,
  unmistakable focus and selection, tabular numerals and visible key caps; there is no display face
  and no decoration. Status and risk tokens are ALIASES of the tones, so giving one its own hue later
  is a one-line change.

  Theming: light is the default. Dark applies when the OS asks for it and the viewer has not chosen
  light, or when the viewer chose dark (html[data-theme="dark"]). The theme controller writes
  data-theme; the pre-paint script in the layout applies a stored choice before first paint.

  Contrast: every pairing the system relies on is listed in lib/design_tokens.rb and measured from
  this file by bin/check_contrast and spec/assets/design_tokens_spec.rb (WCAG 2.1 AA, both themes).
*/

:root {
  /* ---------- Primitive ramps (do not use outside this file) ---------- */
  --gray-50: #f5f6f8;
  --gray-100: #eceef2;
  --gray-900: #1f2430;

  --indigo-50: #eef0ff;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;

  --green-700: #15803d;
  --amber-700: #8a4b06;
  --red-700: #a3170f;

  --dk-bg: #0e1013;
  --dk-surface: #15181d;
  --dk-raised: #1b1f26;
  --dk-sunken: #0b0d10;

  /* ---------- Type ---------- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.875rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.45;

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

  --tracking-tight: -0.01em;
  --tracking-overline: 0.06em;

  /* ---------- Space (4px base) ---------- */
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---------- Layout ---------- */
  --topbar-height: 2.75rem;
  --control-height-sm: 1.75rem;
  --control-height: 2rem;
  --control-height-lg: 2.5rem;
  --row-min-height: 2.5rem;
  --container-max: 80rem;
  --container-prose: 40rem;
  --gutter: var(--space-6);

  /* ---------- Radius ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

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

  /* ---------- Z ---------- */
  --z-sticky: 10;
  --z-topbar: 40;
  --z-popover: 50;
  --z-dialog: 60;
  --z-toast: 70;

  /* =======================================================================================
     SEMANTIC TOKENS, LIGHT
     ======================================================================================= */
  color-scheme: light;

  --color-bg: var(--gray-50);
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: var(--gray-100);
  --color-surface-hover: #f8f9fb;
  --color-surface-selected: var(--indigo-50);
  --color-overlay: rgb(15 18 24 / 0.48);

  --color-border: #dfe2e8;
  --color-border-strong: #c5cad4;
  --color-border-input: #8b93a3;

  --color-text: var(--gray-900);
  --color-text-strong: #0f1218;
  --color-text-muted: #4b5363;
  --color-text-subtle: #646c7c;
  --color-text-inverse: #ffffff;

  --color-action: var(--indigo-600);
  --color-action-hover: var(--indigo-700);
  --color-action-active: var(--indigo-800);
  --color-action-text: #ffffff;
  --color-action-subtle: var(--indigo-50);

  --color-link: var(--indigo-700);
  --color-link-hover: var(--indigo-800);
  --color-focus: var(--indigo-600);

  --color-info-text: var(--indigo-800);
  --color-info-bg: var(--indigo-50);
  --color-info-border: #c7cbff;

  --color-success-text: #166534;
  --color-success-bg: #e7f6ec;
  --color-success-border: #a5d9b5;
  --color-success-solid: var(--green-700);

  --color-warning-text: var(--amber-700);
  --color-warning-bg: #fdf2df;
  --color-warning-border: #f0c98a;

  --color-danger-text: var(--red-700);
  --color-danger-bg: #fdecea;
  --color-danger-border: #f2b0aa;

  --color-neutral-text: #4b5363;
  --color-neutral-bg: var(--gray-100);
  --color-neutral-border: #c5cad4;

  /* ---------- Cue status (aliases of the tones above) ---------- */
  --color-status-pending-text: var(--color-info-text);
  --color-status-pending-bg: var(--color-info-bg);
  --color-status-pending-border: var(--color-info-border);
  --color-status-approved-text: var(--color-success-text);
  --color-status-approved-bg: var(--color-success-bg);
  --color-status-approved-border: var(--color-success-border);
  --color-status-executed-text: var(--color-success-text);
  --color-status-executed-bg: var(--color-success-bg);
  --color-status-executed-border: var(--color-success-border);
  --color-status-executed-solid: var(--color-success-solid);
  --color-status-rejected-text: var(--color-neutral-text);
  --color-status-rejected-bg: var(--color-neutral-bg);
  --color-status-rejected-border: var(--color-neutral-border);
  --color-status-stale-text: var(--color-warning-text);
  --color-status-stale-bg: var(--color-warning-bg);
  --color-status-stale-border: var(--color-warning-border);
  --color-status-expired-text: var(--color-text-subtle);
  --color-status-expired-border: var(--color-border-strong);
  --color-status-failed-text: var(--color-danger-text);
  --color-status-failed-bg: var(--color-danger-bg);
  --color-status-failed-border: var(--color-danger-border);

  /* ---------- Risk (aliases; rendered outline only) ---------- */
  --color-risk-low-text: var(--color-success-text);
  --color-risk-low-border: var(--color-success-border);
  --color-risk-medium-text: var(--color-warning-text);
  --color-risk-medium-border: var(--color-warning-border);
  --color-risk-high-text: var(--color-danger-text);
  --color-risk-high-border: var(--color-danger-border);

  /* ---------- Focus and elevation ---------- */
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus);
  --shadow-xs: 0 1px 1px rgb(15 18 24 / 0.05);
  --shadow-sm: 0 1px 3px rgb(15 18 24 / 0.1), 0 1px 2px rgb(15 18 24 / 0.06);
  --shadow-md: 0 6px 16px -4px rgb(15 18 24 / 0.16), 0 2px 6px rgb(15 18 24 / 0.06);
}

/* =========================================================================================
   SEMANTIC TOKENS, DARK
   The block is written twice: once for "the OS prefers dark and the viewer has not chosen light",
   once for "the viewer chose dark". Keep the two identical; spec/assets/design_tokens_spec.rb
   fails if they drift.
   ========================================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: var(--dk-bg);
    --color-surface: var(--dk-surface);
    --color-surface-raised: var(--dk-raised);
    --color-surface-sunken: var(--dk-sunken);
    --color-surface-hover: #1a1e25;
    --color-surface-selected: #1e2142;
    --color-overlay: rgb(0 0 0 / 0.64);
    --color-border: #272b34;
    --color-border-strong: #363b46;
    --color-border-input: #646c7c;
    --color-text: #d8dce3;
    --color-text-strong: #f3f4f6;
    --color-text-muted: #a7adb9;
    --color-text-subtle: #8b92a0;
    --color-text-inverse: var(--dk-bg);
    --color-action-subtle: #1e2142;
    --color-link: #a5b4fc;
    --color-link-hover: #c7d2fe;
    --color-focus: #a5b4fc;
    --color-info-text: #c7d2fe;
    --color-info-bg: #1e2142;
    --color-info-border: #3b3f8a;
    --color-success-text: #86d9a9;
    --color-success-bg: #0d2f22;
    --color-success-border: #1e5a3e;
    --color-warning-text: #f3c57a;
    --color-warning-bg: #33230a;
    --color-warning-border: #6b4a14;
    --color-danger-text: #ff9c95;
    --color-danger-bg: #3a1214;
    --color-danger-border: #7a2a26;
    --color-neutral-text: #a7adb9;
    --color-neutral-bg: var(--dk-raised);
    --color-neutral-border: #363b46;
    --shadow-xs: 0 1px 1px rgb(0 0 0 / 0.4);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5);
    --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--dk-bg);
  --color-surface: var(--dk-surface);
  --color-surface-raised: var(--dk-raised);
  --color-surface-sunken: var(--dk-sunken);
  --color-surface-hover: #1a1e25;
  --color-surface-selected: #1e2142;
  --color-overlay: rgb(0 0 0 / 0.64);
  --color-border: #272b34;
  --color-border-strong: #363b46;
  --color-border-input: #646c7c;
  --color-text: #d8dce3;
  --color-text-strong: #f3f4f6;
  --color-text-muted: #a7adb9;
  --color-text-subtle: #8b92a0;
  --color-text-inverse: var(--dk-bg);
  --color-action-subtle: #1e2142;
  --color-link: #a5b4fc;
  --color-link-hover: #c7d2fe;
  --color-focus: #a5b4fc;
  --color-info-text: #c7d2fe;
  --color-info-bg: #1e2142;
  --color-info-border: #3b3f8a;
  --color-success-text: #86d9a9;
  --color-success-bg: #0d2f22;
  --color-success-border: #1e5a3e;
  --color-warning-text: #f3c57a;
  --color-warning-bg: #33230a;
  --color-warning-border: #6b4a14;
  --color-danger-text: #ff9c95;
  --color-danger-bg: #3a1214;
  --color-danger-border: #7a2a26;
  --color-neutral-text: #a7adb9;
  --color-neutral-bg: var(--dk-raised);
  --color-neutral-border: #363b46;
  --shadow-xs: 0 1px 1px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5);
  --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.4);
}