/* SPDX-License-Identifier: Apache-2.0 AND LicenseRef-Commons-Clause-1.0 */
/* GENERATED from design/tokens.json by scripts/design-tokens.mjs. Edit the JSON, not this file. */
: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;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --duration-instant: 80ms;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slide: 220ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --ease-elastic: cubic-bezier(0.3, 1.55, 0.5, 1);
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
:root {
  --bg: #f2f8f8;
  --surface: #ffffff;
  --surface-2: #eaf2f2;
  --surface-3: #dee9e9;
  --border: #d5e1e0;
  --border-strong: #738484;
  --text: #0f2b31;
  --text-2: #425a60;
  --text-3: #53676c;
  --accent: #36dede;
  --on-accent: #001f26;
  --accent-text: #006b6c;
  --accent-strong: #00bcbd;
  --accent-weak: #d1f7f7;
  --coral: #fd736d;
  --coral-text: #b32228;
  --coral-weak: #ffe8e6;
  --sun: #ffcf53;
  --sun-text: #805d00;
  --sun-weak: #fff0d0;
  --grape: #a97cf0;
  --grape-text: #7137b6;
  --grape-weak: #f1ebfd;
  --ok: #6ec75a;
  --ok-text: #23690d;
  --ok-weak: #ddf7d8;
  --warn: #fcb442;
  --warn-text: #8a5600;
  --warn-weak: #ffefd1;
  --crit: #d73337;
  --on-crit: #ffffff;
  --crit-text: #b71824;
  --crit-weak: #ffe8e6;
  --info: #46a6ef;
  --info-text: #0062a6;
  --info-weak: #e1f1ff;
  --idle: #738488;
  --idle-weak: #eaf0f1;
  --focus: #0f2b31;
  --focus-halo: #ffffff;
  --shadow-1: 0 1px 2px rgba(16, 36, 40, 0.06), 0 1px 3px rgba(16, 36, 40, 0.08);
  --shadow-2: 0 6px 20px rgba(16, 36, 40, 0.12);
  --shadow-3: 0 20px 60px rgba(16, 36, 40, 0.22);
}
:root[data-vision='cb'] {
  --ok: #56b4e9;
  --ok-text: #005a8e;
  --ok-weak: #e0f1ff;
  --warn: #f0e442;
  --warn-text: #6b5300;
  --warn-weak: #fef2c5;
  --crit: #b85100;
  --crit-text: #a84800;
  --crit-weak: #ffe8dc;
  --info: #cc79a7;
  --info-text: #8e4a73;
  --info-weak: #fde7f5;
}
:root[data-contrast='high'] {
  --bg: #ffffff;
  --surface-2: #f2f2f2;
  --surface-3: #e6e6e6;
  --border: #5c5c5c;
  --border-strong: #000000;
  --text: #000000;
  --text-2: #1f1f1f;
  --text-3: #3d3d3d;
  --accent: #5de9e9;
  --on-accent: #000000;
  --accent-text: #004b4c;
  --accent-strong: #31c8c9;
  --coral-text: #83000d;
  --sun-text: #583d00;
  --grape: #b995f6;
  --grape-text: #4c1b82;
  --ok-text: #154a06;
  --warn-text: #603800;
  --crit: #a50d1c;
  --crit-text: #83000d;
  --info-text: #004077;
  --idle: #3c4b4e;
  --focus: #000000;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
}
:root[data-vision='cb'][data-contrast='high'] {
  --bg: #ffffff;
  --surface-2: #f2f2f2;
  --surface-3: #e6e6e6;
  --border: #5c5c5c;
  --border-strong: #000000;
  --text: #000000;
  --text-2: #1f1f1f;
  --text-3: #3d3d3d;
  --accent: #5de9e9;
  --on-accent: #000000;
  --accent-text: #004b4c;
  --accent-strong: #31c8c9;
  --coral-text: #83000d;
  --sun-text: #583d00;
  --grape: #b995f6;
  --grape-text: #4c1b82;
  --ok-text: #154a06;
  --warn-text: #603800;
  --crit: #a50d1c;
  --crit-text: #83000d;
  --info-text: #004077;
  --idle: #3c4b4e;
  --focus: #000000;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
  --ok: #56b4e9;
  --ok-text: #005a8e;
  --ok-weak: #e0f1ff;
  --warn: #f0e442;
  --warn-text: #6b5300;
  --warn-weak: #fef2c5;
  --crit: #b85100;
  --crit-text: #a84800;
  --crit-weak: #ffe8dc;
  --info: #cc79a7;
  --info-text: #8e4a73;
  --info-weak: #fde7f5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #000000;
    --surface: #0c1012;
    --surface-2: #131a1b;
    --surface-3: #1e2628;
    --border: #272f32;
    --border-strong: #6a777a;
    --text: #edf3f3;
    --text-2: #bdc6c8;
    --text-3: #94a1a4;
    --accent: #4ce4e4;
    --on-accent: #001a21;
    --accent-text: #4ce4e4;
    --accent-strong: #87f3f2;
    --accent-weak: #003030;
    --coral: #ff7e76;
    --coral-text: #ff9189;
    --coral-weak: #3b1c1a;
    --sun-text: #f8ca65;
    --sun-weak: #322405;
    --grape: #b58bf9;
    --grape-text: #caacff;
    --grape-weak: #2b1f3f;
    --ok: #77d163;
    --ok-text: #89dd76;
    --ok-weak: #132b0d;
    --warn: #ffbb49;
    --warn-text: #ffc165;
    --warn-weak: #372100;
    --crit: #fc5855;
    --on-crit: #001a21;
    --crit-text: #ff9189;
    --crit-weak: #401312;
    --info: #5db2f7;
    --info-text: #86c5fa;
    --info-weak: #062942;
    --idle: #79898e;
    --idle-weak: #171c1d;
    --focus: #edf3f3;
    --focus-halo: #000000;
    --shadow-1: none;
    --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 20px 60px rgba(0, 0, 0, 0.6);
  }
  :root:not([data-theme='light'])[data-vision='cb'] {
    --ok: #56b4e9;
    --ok-text: #7cc7f0;
    --ok-weak: #092540;
    --warn: #f0e442;
    --warn-text: #f0e442;
    --warn-weak: #2d2700;
    --crit: #e69f00;
    --crit-text: #ffb21a;
    --crit-weak: #3f1b00;
    --info: #cc79a7;
    --info-text: #e2a1c7;
    --info-weak: #391a30;
  }
  :root:not([data-theme='light'])[data-contrast='high'] {
    --surface: #000000;
    --surface-2: #111111;
    --surface-3: #1f1f1f;
    --border: #9a9a9a;
    --border-strong: #ffffff;
    --text: #ffffff;
    --text-2: #f0f0f0;
    --text-3: #d6d6d6;
    --coral-text: #ffb5ad;
    --sun-text: #ffdf83;
    --grape: #caacff;
    --grape-text: #e0cbff;
    --ok-text: #abf59b;
    --warn-text: #ffdc84;
    --crit: #ff9b93;
    --on-crit: #000000;
    --crit-text: #ffb5ad;
    --info-text: #abdeff;
    --idle: #aabbbf;
    --focus: #ffffff;
    --shadow-2: none;
    --shadow-3: none;
  }
  :root:not([data-theme='light'])[data-vision='cb'][data-contrast='high'] {
    --surface: #000000;
    --surface-2: #111111;
    --surface-3: #1f1f1f;
    --border: #9a9a9a;
    --border-strong: #ffffff;
    --text: #ffffff;
    --text-2: #f0f0f0;
    --text-3: #d6d6d6;
    --coral-text: #ffb5ad;
    --sun-text: #ffdf83;
    --grape: #caacff;
    --grape-text: #e0cbff;
    --ok-text: #abf59b;
    --warn-text: #ffdc84;
    --crit: #ff9b93;
    --on-crit: #000000;
    --crit-text: #ffb5ad;
    --info-text: #abdeff;
    --idle: #aabbbf;
    --focus: #ffffff;
    --shadow-2: none;
    --shadow-3: none;
    --ok: #56b4e9;
    --ok-text: #7cc7f0;
    --ok-weak: #092540;
    --warn: #f0e442;
    --warn-text: #f0e442;
    --warn-weak: #2d2700;
    --crit: #e69f00;
    --crit-text: #ffb21a;
    --crit-weak: #3f1b00;
    --info: #cc79a7;
    --info-text: #e2a1c7;
    --info-weak: #391a30;
  }
}
:root[data-theme='dark'] {
  --bg: #000000;
  --surface: #0c1012;
  --surface-2: #131a1b;
  --surface-3: #1e2628;
  --border: #272f32;
  --border-strong: #6a777a;
  --text: #edf3f3;
  --text-2: #bdc6c8;
  --text-3: #94a1a4;
  --accent: #4ce4e4;
  --on-accent: #001a21;
  --accent-text: #4ce4e4;
  --accent-strong: #87f3f2;
  --accent-weak: #003030;
  --coral: #ff7e76;
  --coral-text: #ff9189;
  --coral-weak: #3b1c1a;
  --sun-text: #f8ca65;
  --sun-weak: #322405;
  --grape: #b58bf9;
  --grape-text: #caacff;
  --grape-weak: #2b1f3f;
  --ok: #77d163;
  --ok-text: #89dd76;
  --ok-weak: #132b0d;
  --warn: #ffbb49;
  --warn-text: #ffc165;
  --warn-weak: #372100;
  --crit: #fc5855;
  --on-crit: #001a21;
  --crit-text: #ff9189;
  --crit-weak: #401312;
  --info: #5db2f7;
  --info-text: #86c5fa;
  --info-weak: #062942;
  --idle: #79898e;
  --idle-weak: #171c1d;
  --focus: #edf3f3;
  --focus-halo: #000000;
  --shadow-1: none;
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 20px 60px rgba(0, 0, 0, 0.6);
}
:root[data-theme='dark'][data-vision='cb'] {
  --ok: #56b4e9;
  --ok-text: #7cc7f0;
  --ok-weak: #092540;
  --warn: #f0e442;
  --warn-text: #f0e442;
  --warn-weak: #2d2700;
  --crit: #e69f00;
  --crit-text: #ffb21a;
  --crit-weak: #3f1b00;
  --info: #cc79a7;
  --info-text: #e2a1c7;
  --info-weak: #391a30;
}
:root[data-theme='dark'][data-contrast='high'] {
  --surface: #000000;
  --surface-2: #111111;
  --surface-3: #1f1f1f;
  --border: #9a9a9a;
  --border-strong: #ffffff;
  --text: #ffffff;
  --text-2: #f0f0f0;
  --text-3: #d6d6d6;
  --coral-text: #ffb5ad;
  --sun-text: #ffdf83;
  --grape: #caacff;
  --grape-text: #e0cbff;
  --ok-text: #abf59b;
  --warn-text: #ffdc84;
  --crit: #ff9b93;
  --on-crit: #000000;
  --crit-text: #ffb5ad;
  --info-text: #abdeff;
  --idle: #aabbbf;
  --focus: #ffffff;
  --shadow-2: none;
  --shadow-3: none;
}
:root[data-theme='dark'][data-vision='cb'][data-contrast='high'] {
  --surface: #000000;
  --surface-2: #111111;
  --surface-3: #1f1f1f;
  --border: #9a9a9a;
  --border-strong: #ffffff;
  --text: #ffffff;
  --text-2: #f0f0f0;
  --text-3: #d6d6d6;
  --coral-text: #ffb5ad;
  --sun-text: #ffdf83;
  --grape: #caacff;
  --grape-text: #e0cbff;
  --ok-text: #abf59b;
  --warn-text: #ffdc84;
  --crit: #ff9b93;
  --on-crit: #000000;
  --crit-text: #ffb5ad;
  --info-text: #abdeff;
  --idle: #aabbbf;
  --focus: #ffffff;
  --shadow-2: none;
  --shadow-3: none;
  --ok: #56b4e9;
  --ok-text: #7cc7f0;
  --ok-weak: #092540;
  --warn: #f0e442;
  --warn-text: #f0e442;
  --warn-weak: #2d2700;
  --crit: #e69f00;
  --crit-text: #ffb21a;
  --crit-weak: #3f1b00;
  --info: #cc79a7;
  --info-text: #e2a1c7;
  --info-weak: #391a30;
}
.display-xl { font: 700 56px/58px var(--font-display); letter-spacing: -0.025em; }
.display { font: 700 36px/40px var(--font-display); letter-spacing: -0.02em; }
.title { font: 650 20px/26px var(--font-display); letter-spacing: -0.01em; }
.heading { font: 600 15px/20px var(--font-sans); letter-spacing: -0.01em; }
.body { font: 400 14px/20px var(--font-sans); }
.body-sm { font: 400 13px/18px var(--font-sans); }
.caption { font: 500 12px/16px var(--font-sans); }
.overline { font: 600 11px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; }
.mono { font: 400 12.5px/18px var(--font-mono); }
.mono-sm { font: 500 11.5px/16px var(--font-mono); }