/*
 * Echo tokens as plain CSS custom properties.
 * GENERATED from docs/design/tokens.json by gen-theme.mjs; edit the tokens, not this file.
 * Dark follows the OS; <html data-theme="light|dark"> pins a theme. Print is always light.
 */

:root {
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 9999px;
  --size-control-sm: 28px;
  --size-control-md: 32px;
  --size-control-lg: 40px;
  --size-topbar: 44px;
  --size-statusbar: 28px;
  --size-sidebar: 240px;
  --size-icon-sm: 14px;
  --size-icon-md: 16px;
  --size-icon-lg: 20px;
  --measure: 68ch;
  --font-sans: "IBM Plex Sans Variable", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-serif: "IBM Plex Serif", ui-serif, Georgia, "Noto Serif", serif;
  --canvas: #f4f6f8;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #ebeef2;
  --row-alt: #f8f9fb;
  --line: #dde2e8;
  --line-strong: #7a8593;
  --ink: #1b2430;
  --ink-muted: #4f5a68;
  --ink-faint: #7a8593;
  --brand: #0071bc;
  --brand-hover: #005c99;
  --on-brand: #ffffff;
  --brand-soft: #e5f0f9;
  --brand-ink: #0068ad;
  --marker: #f2d544;
  --marker-soft: #fbefa6;
  --on-marker: #1b2430;
  --focus: #0071bc;
  --draft: #4f5a68;
  --draft-soft: #eceff3;
  --confirmed: #0b7a55;
  --confirmed-soft: #e1f3ec;
  --review: #955800;
  --review-soft: #fcefd9;
  --danger: #b23d0a;
  --danger-soft: #fbe7dd;
  --on-danger: #ffffff;
  --signoff: #954677;
  --signoff-soft: #f6e6ef;
  --control-top: #ffffff;
  --control: #edf0f4;
  --control-hover: #e2e7ee;
  --control-line: #c6cdd6;
  --brand-top: #0a77c0;
  --danger-top: #bf4612;
  --tag-bg: #e9edf2;
  --tag-ink: #3f4a57;
  --tag-line: #c5ccd5;
  --cat-red: #d70c13;
  --cat-red-soft: #feebe8;
  --cat-orange: #9e5a03;
  --cat-orange-soft: #feedde;
  --cat-yellow: #746d06;
  --cat-yellow-soft: #f4f2d0;
  --cat-green: #047b4c;
  --cat-green-soft: #dbf9e6;
  --cat-teal: #017973;
  --cat-teal-soft: #daf7f4;
  --cat-violet: #7157ce;
  --cat-violet-soft: #efeefe;
  --cat-plum: #ac3d9e;
  --cat-plum-soft: #ffe8fa;
  --shadow-control: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(27,36,48,0.10);
  --shadow-control-fill: inset 0 1px 0 rgba(255,255,255,0.20), 0 1px 2px rgba(0,45,90,0.25);
  --shadow-control-pressed: inset 0 1px 2px rgba(27,36,48,0.18);
  --shadow-popover: 0 1px 2px rgba(16,36,40,0.08), 0 4px 12px rgba(16,36,40,0.10);
  --shadow-dialog: 0 2px 4px rgba(16,36,40,0.08), 0 16px 40px rgba(16,36,40,0.18);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #181818;
    --surface: #1e1e1e;
    --surface-raised: #282828;
    --surface-sunken: #2b2b2b;
    --row-alt: #1b1b1b;
    --line: #303030;
    --line-strong: #6e6e6e;
    --ink: #e8e8e8;
    --ink-muted: #9e9e9e;
    --ink-faint: #6e6e6e;
    --brand: #0071bc;
    --brand-hover: #005c99;
    --on-brand: #ffffff;
    --brand-soft: #1c2a3a;
    --brand-ink: #7cb6ec;
    --marker: #e3c84a;
    --marker-soft: #4a4210;
    --on-marker: #1a1706;
    --focus: #7cb6ec;
    --draft: #a6a6a6;
    --draft-soft: #2b2b2b;
    --confirmed: #4cc597;
    --confirmed-soft: #11302a;
    --review: #f0a830;
    --review-soft: #3b2a0e;
    --danger: #ff8b57;
    --danger-soft: #3d1d12;
    --on-danger: #1f0a03;
    --signoff: #e09bc6;
    --signoff-soft: #36202e;
    --control-top: #353535;
    --control: #2a2a2a;
    --control-hover: #313131;
    --control-line: #424242;
    --brand-top: #0a77c0;
    --danger-top: #ff9a6c;
    --tag-bg: #2b2b2b;
    --tag-ink: #c2c2c2;
    --tag-line: #454545;
    --cat-red: #f75f51;
    --cat-red-soft: #481b17;
    --cat-orange: #d07f2a;
    --cat-orange-soft: #422201;
    --cat-yellow: #a19702;
    --cat-yellow-soft: #302d01;
    --cat-green: #4ca777;
    --cat-green-soft: #09341f;
    --cat-teal: #4ba59e;
    --cat-teal-soft: #073330;
    --cat-violet: #9583ea;
    --cat-violet-soft: #2b244b;
    --cat-plum: #d070c0;
    --cat-plum-soft: #3f1c3a;
    --shadow-control: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,0.45);
    --shadow-control-fill: inset 0 1px 0 rgba(255,255,255,0.16), 0 1px 2px rgba(0,0,0,0.55);
    --shadow-control-pressed: inset 0 1px 2px rgba(0,0,0,0.55);
    --shadow-popover: 0 0 0 1px rgba(0,0,0,0.30), 0 6px 16px rgba(0,0,0,0.45);
    --shadow-dialog: 0 0 0 1px rgba(0,0,0,0.40), 0 20px 48px rgba(0,0,0,0.60);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --canvas: #181818;
  --surface: #1e1e1e;
  --surface-raised: #282828;
  --surface-sunken: #2b2b2b;
  --row-alt: #1b1b1b;
  --line: #303030;
  --line-strong: #6e6e6e;
  --ink: #e8e8e8;
  --ink-muted: #9e9e9e;
  --ink-faint: #6e6e6e;
  --brand: #0071bc;
  --brand-hover: #005c99;
  --on-brand: #ffffff;
  --brand-soft: #1c2a3a;
  --brand-ink: #7cb6ec;
  --marker: #e3c84a;
  --marker-soft: #4a4210;
  --on-marker: #1a1706;
  --focus: #7cb6ec;
  --draft: #a6a6a6;
  --draft-soft: #2b2b2b;
  --confirmed: #4cc597;
  --confirmed-soft: #11302a;
  --review: #f0a830;
  --review-soft: #3b2a0e;
  --danger: #ff8b57;
  --danger-soft: #3d1d12;
  --on-danger: #1f0a03;
  --signoff: #e09bc6;
  --signoff-soft: #36202e;
  --control-top: #353535;
  --control: #2a2a2a;
  --control-hover: #313131;
  --control-line: #424242;
  --brand-top: #0a77c0;
  --danger-top: #ff9a6c;
  --tag-bg: #2b2b2b;
  --tag-ink: #c2c2c2;
  --tag-line: #454545;
  --cat-red: #f75f51;
  --cat-red-soft: #481b17;
  --cat-orange: #d07f2a;
  --cat-orange-soft: #422201;
  --cat-yellow: #a19702;
  --cat-yellow-soft: #302d01;
  --cat-green: #4ca777;
  --cat-green-soft: #09341f;
  --cat-teal: #4ba59e;
  --cat-teal-soft: #073330;
  --cat-violet: #9583ea;
  --cat-violet-soft: #2b244b;
  --cat-plum: #d070c0;
  --cat-plum-soft: #3f1c3a;
  --shadow-control: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,0.45);
  --shadow-control-fill: inset 0 1px 0 rgba(255,255,255,0.16), 0 1px 2px rgba(0,0,0,0.55);
  --shadow-control-pressed: inset 0 1px 2px rgba(0,0,0,0.55);
  --shadow-popover: 0 0 0 1px rgba(0,0,0,0.30), 0 6px 16px rgba(0,0,0,0.45);
  --shadow-dialog: 0 0 0 1px rgba(0,0,0,0.40), 0 20px 48px rgba(0,0,0,0.60);
  color-scheme: dark;
}

@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    --canvas: #f4f6f8;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-sunken: #ebeef2;
    --row-alt: #f8f9fb;
    --line: #dde2e8;
    --line-strong: #7a8593;
    --ink: #1b2430;
    --ink-muted: #4f5a68;
    --ink-faint: #7a8593;
    --brand: #0071bc;
    --brand-hover: #005c99;
    --on-brand: #ffffff;
    --brand-soft: #e5f0f9;
    --brand-ink: #0068ad;
    --marker: #f2d544;
    --marker-soft: #fbefa6;
    --on-marker: #1b2430;
    --focus: #0071bc;
    --draft: #4f5a68;
    --draft-soft: #eceff3;
    --confirmed: #0b7a55;
    --confirmed-soft: #e1f3ec;
    --review: #955800;
    --review-soft: #fcefd9;
    --danger: #b23d0a;
    --danger-soft: #fbe7dd;
    --on-danger: #ffffff;
    --signoff: #954677;
    --signoff-soft: #f6e6ef;
    --control-top: #ffffff;
    --control: #edf0f4;
    --control-hover: #e2e7ee;
    --control-line: #c6cdd6;
    --brand-top: #0a77c0;
    --danger-top: #bf4612;
    --tag-bg: #e9edf2;
    --tag-ink: #3f4a57;
    --tag-line: #c5ccd5;
    --cat-red: #d70c13;
    --cat-red-soft: #feebe8;
    --cat-orange: #9e5a03;
    --cat-orange-soft: #feedde;
    --cat-yellow: #746d06;
    --cat-yellow-soft: #f4f2d0;
    --cat-green: #047b4c;
    --cat-green-soft: #dbf9e6;
    --cat-teal: #017973;
    --cat-teal-soft: #daf7f4;
    --cat-violet: #7157ce;
    --cat-violet-soft: #efeefe;
    --cat-plum: #ac3d9e;
    --cat-plum-soft: #ffe8fa;
    --shadow-control: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(27,36,48,0.10);
    --shadow-control-fill: inset 0 1px 0 rgba(255,255,255,0.20), 0 1px 2px rgba(0,45,90,0.25);
    --shadow-control-pressed: inset 0 1px 2px rgba(27,36,48,0.18);
    --shadow-popover: 0 1px 2px rgba(16,36,40,0.08), 0 4px 12px rgba(16,36,40,0.10);
    --shadow-dialog: 0 2px 4px rgba(16,36,40,0.08), 0 16px 40px rgba(16,36,40,0.18);
    color-scheme: light;
  }
}