/*
 * Generated by @catalog/ui. Do not edit by hand.
 *
 * The values come from the token table in
 * docs/requirements/ui-ux-requirements.md, which is frozen. Change a token
 * in packages/ui/src/tokens.ts and rebuild the package:
 *
 *   pnpm --filter @catalog/ui build
 */

:root {
  color-scheme: light dark;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-control: 8px;
  --radius-card: 10px;
  --radius-pill: 999px;
  --font-sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --type-display-size: 28px;
  --type-display-line: 34px;
  --type-display-weight: 650;
  --type-title-size: 22px;
  --type-title-line: 28px;
  --type-title-weight: 600;
  --type-heading-size: 17px;
  --type-heading-line: 24px;
  --type-heading-weight: 600;
  --type-body-size: 15px;
  --type-body-line: 22px;
  --type-body-weight: 400;
  --type-small-size: 13px;
  --type-small-line: 18px;
  --type-small-weight: 400;
  --type-numeric: tabular-nums;
  --motion-response: 100ms;
  --motion-press: 120ms;
  --motion-release: 180ms;
  --motion-drag-min: 180ms;
  --motion-drag-max: 240ms;
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-press-scale: 0.98;
  --canvas: #F4F9FC;
  --surface: #FFFFFF;
  --surface-muted: #EAF5FB;
  --primary: #3D9BCB;
  --primary-strong: #176B8F;
  --accent: #F2A65A;
  --text: #173247;
  --text-muted: #557184;
  --border: #CFE3EE;
  --border-strong: #4F8CA6;
  --success: #2F8F6B;
  --warning: #C66A1B;
  --danger: #B84C4C;
  --action: #176B8F;
  --on-fill: #FFFFFF;
  --on-accent: #173247;
  --success-tint: #DFF0E9;
  --danger-tint: #F7E4E4;
  --info-tint: #D9EDF8;
  --warning-tint: #FAEBDC;
  --shadow: 0 1px 2px rgba(23, 50, 71, 0.10), 0 2px 6px rgba(23, 50, 71, 0.06);
  --shadow-raised: 0 4px 12px rgba(23, 50, 71, 0.14), 0 2px 4px rgba(23, 50, 71, 0.08);
}

/* The system preference, unless somebody has chosen the light theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0F1B24;
    --surface: #162733;
    --surface-muted: #1D3442;
    --primary: #70C1E8;
    --primary-strong: #A5DCF3;
    --accent: #F1AD68;
    --text: #EAF4F8;
    --text-muted: #A8BEC9;
    --border: #355262;
    --border-strong: #708A98;
    --success: #69C49B;
    --warning: #F1AD68;
    --danger: #F08A8A;
    --action: #70C1E8;
    --on-fill: #0F1B24;
    --on-accent: #0F1B24;
    --success-tint: #1E3A2F;
    --danger-tint: #3E2323;
    --info-tint: #1F3D50;
    --warning-tint: #402F1C;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-raised: 0 6px 16px rgba(0, 0, 0, 0.5);
  }
}

/* An explicit choice wins over the system preference, both ways. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0F1B24;
  --surface: #162733;
  --surface-muted: #1D3442;
  --primary: #70C1E8;
  --primary-strong: #A5DCF3;
  --accent: #F1AD68;
  --text: #EAF4F8;
  --text-muted: #A8BEC9;
  --border: #355262;
  --border-strong: #708A98;
  --success: #69C49B;
  --warning: #F1AD68;
  --danger: #F08A8A;
  --action: #70C1E8;
  --on-fill: #0F1B24;
  --on-accent: #0F1B24;
  --success-tint: #1E3A2F;
  --danger-tint: #3E2323;
  --info-tint: #1F3D50;
  --warning-tint: #402F1C;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-raised: 0 6px 16px rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #F4F9FC;
  --surface: #FFFFFF;
  --surface-muted: #EAF5FB;
  --primary: #3D9BCB;
  --primary-strong: #176B8F;
  --accent: #F2A65A;
  --text: #173247;
  --text-muted: #557184;
  --border: #CFE3EE;
  --border-strong: #4F8CA6;
  --success: #2F8F6B;
  --warning: #C66A1B;
  --danger: #B84C4C;
  --action: #176B8F;
  --on-fill: #FFFFFF;
  --on-accent: #173247;
  --success-tint: #DFF0E9;
  --danger-tint: #F7E4E4;
  --info-tint: #D9EDF8;
  --warning-tint: #FAEBDC;
  --shadow: 0 1px 2px rgba(23, 50, 71, 0.10), 0 2px 6px rgba(23, 50, 71, 0.06);
  --shadow-raised: 0 4px 12px rgba(23, 50, 71, 0.14), 0 2px 4px rgba(23, 50, 71, 0.08);
}