@layer tokens, base, layout, components, pages, utilities;
/* GENERATED by `npm run design:build` from design/tokens.ts. Do not edit: change the tokens. */

@layer tokens {

:root {
  --ds-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ds-font-code: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --ds-font-weight-regular: 400;
  --ds-font-weight-medium: 500;
  --ds-font-weight-semibold: 600;
  --ds-font-weight-bold: 653;
  --ds-line-height-body: 1.42857;
  --ds-radius-xsmall: 2px;
  --ds-radius-small: 4px;
  --ds-radius-control: 6px;
  --ds-radius-card: 8px;
  --ds-radius-overlay: 12px;
  --ds-radius-round: 9999px;
  --ds-space-050: 4px;
  --ds-space-100: 8px;
  --ds-space-150: 12px;
  --ds-space-200: 16px;
  --ds-space-300: 24px;
  --ds-space-400: 32px;
  --ds-duration-fast: 120ms;
  --ds-duration-medium: 200ms;
  --ds-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ds-print-paper: #FFFFFF;
  --ds-print-ink: #000000;
  --ds-print-edge: #D9D9D9;
  --ds-surface-sunken: #18191A;
  --ds-surface: #1F1F21;
  --ds-surface-raised: #242528;
  --ds-surface-overlay: #2B2C2F;
  --ds-surface-hovered: #242528;
  --ds-surface-pressed: #2B2C2F;
  --ds-surface-selected: #1C2B42;
  --ds-button-default: #CECED912;
  --ds-button-default-hovered: #E3E4F21F;
  --ds-item-hovered: #CECED912;
  --ds-border: #E3E4F21F;
  --ds-border-bold: #7E8188;
  --ds-border-focused: #8FB8F6;
  --ds-border-card: transparent;
  --ds-text: #CECFD2;
  --ds-text-subtle: #A9ABAF;
  --ds-text-subtlest: #96999E;
  --ds-text-inverse: #1F1F21;
  --ds-link: #669DF1;
  --ds-brand: #669DF1;
  --ds-brand-hovered: #8FB8F6;
  --ds-text-on-brand: #1F1F21;
  --ds-tone-success: #82B536;
  --ds-tone-success-subtle: #28311B;
  --ds-tone-success-text: #B3DF72;
  --ds-tone-warning: #FBC828;
  --ds-tone-warning-subtle: #3A2C1F;
  --ds-tone-warning-text: #FBC828;
  --ds-tone-danger: #F15B50;
  --ds-tone-danger-subtle: #42221F;
  --ds-tone-danger-text: #FD9891;
  --ds-tone-info: #4688EC;
  --ds-tone-info-subtle: #1C2B42;
  --ds-tone-info-text: #8FB8F6;
  --ds-tone-discovery: #BF63F3;
  --ds-tone-discovery-subtle: #35243F;
  --ds-tone-discovery-text: #D8A0F7;
  --ds-tone-neutral: #7E8188;
  --ds-tone-neutral-subtle: #303134;
  --ds-tone-neutral-text: #A9ABAF;
  --ds-tone-teal: #42B2D7;
  --ds-tone-teal-subtle: #1E3137;
  --ds-tone-teal-text: #9DD9EE;
  --ds-tone-orange: #F68909;
  --ds-tone-orange-subtle: #3A2C1F;
  --ds-tone-orange-text: #FBC828;
  --ds-danger-bold: #F87168;
  --ds-chart-1: #4688EC;
  --ds-chart-2: #94C748;
  --ds-chart-3: #C97CF4;
  --ds-chart-4: #FCA700;
  --ds-chart-5: #1558BC;
  --ds-chart-other: #7E8188;
  --ds-shadow-raised: 0px 0px 0px 1px #00000000, 0px 1px 1px #01040480, 0px 0px 1px #01040480;
  --ds-shadow-overlay: 0px 0px 0px 1px #BDBDBD1F, 0px 8px 12px #0104045C, 0px 0px 1px 1px #01040480;
  --ds-ink: #010404;
  color-scheme: dark;
}

:root[data-theme="dark"] {
  --ds-surface-sunken: #18191A;
  --ds-surface: #1F1F21;
  --ds-surface-raised: #242528;
  --ds-surface-overlay: #2B2C2F;
  --ds-surface-hovered: #242528;
  --ds-surface-pressed: #2B2C2F;
  --ds-surface-selected: #1C2B42;
  --ds-button-default: #CECED912;
  --ds-button-default-hovered: #E3E4F21F;
  --ds-item-hovered: #CECED912;
  --ds-border: #E3E4F21F;
  --ds-border-bold: #7E8188;
  --ds-border-focused: #8FB8F6;
  --ds-border-card: transparent;
  --ds-text: #CECFD2;
  --ds-text-subtle: #A9ABAF;
  --ds-text-subtlest: #96999E;
  --ds-text-inverse: #1F1F21;
  --ds-link: #669DF1;
  --ds-brand: #669DF1;
  --ds-brand-hovered: #8FB8F6;
  --ds-text-on-brand: #1F1F21;
  --ds-tone-success: #82B536;
  --ds-tone-success-subtle: #28311B;
  --ds-tone-success-text: #B3DF72;
  --ds-tone-warning: #FBC828;
  --ds-tone-warning-subtle: #3A2C1F;
  --ds-tone-warning-text: #FBC828;
  --ds-tone-danger: #F15B50;
  --ds-tone-danger-subtle: #42221F;
  --ds-tone-danger-text: #FD9891;
  --ds-tone-info: #4688EC;
  --ds-tone-info-subtle: #1C2B42;
  --ds-tone-info-text: #8FB8F6;
  --ds-tone-discovery: #BF63F3;
  --ds-tone-discovery-subtle: #35243F;
  --ds-tone-discovery-text: #D8A0F7;
  --ds-tone-neutral: #7E8188;
  --ds-tone-neutral-subtle: #303134;
  --ds-tone-neutral-text: #A9ABAF;
  --ds-tone-teal: #42B2D7;
  --ds-tone-teal-subtle: #1E3137;
  --ds-tone-teal-text: #9DD9EE;
  --ds-tone-orange: #F68909;
  --ds-tone-orange-subtle: #3A2C1F;
  --ds-tone-orange-text: #FBC828;
  --ds-danger-bold: #F87168;
  --ds-chart-1: #4688EC;
  --ds-chart-2: #94C748;
  --ds-chart-3: #C97CF4;
  --ds-chart-4: #FCA700;
  --ds-chart-5: #1558BC;
  --ds-chart-other: #7E8188;
  --ds-shadow-raised: 0px 0px 0px 1px #00000000, 0px 1px 1px #01040480, 0px 0px 1px #01040480;
  --ds-shadow-overlay: 0px 0px 0px 1px #BDBDBD1F, 0px 8px 12px #0104045C, 0px 0px 1px 1px #01040480;
  --ds-ink: #010404;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --ds-surface-sunken: #F8F8F8;
  --ds-surface: #FFFFFF;
  --ds-surface-raised: #FFFFFF;
  --ds-surface-overlay: #FFFFFF;
  --ds-surface-hovered: #F0F1F2;
  --ds-surface-pressed: #DDDEE1;
  --ds-surface-selected: #E9F2FE;
  --ds-button-default: #0515240F;
  --ds-button-default-hovered: #0B120E24;
  --ds-item-hovered: #0515240F;
  --ds-border: #0B120E24;
  --ds-border-bold: #7D818A;
  --ds-border-focused: #4688EC;
  --ds-border-card: #0B120E24;
  --ds-text: #292A2E;
  --ds-text-subtle: #505258;
  --ds-text-subtlest: #6B6E76;
  --ds-text-inverse: #FFFFFF;
  --ds-link: #1868DB;
  --ds-brand: #1868DB;
  --ds-brand-hovered: #1558BC;
  --ds-text-on-brand: #FFFFFF;
  --ds-tone-success: #6A9A23;
  --ds-tone-success-subtle: #EFFFD6;
  --ds-tone-success-text: #4C6B1F;
  --ds-tone-warning: #E06C00;
  --ds-tone-warning-subtle: #FFF5DB;
  --ds-tone-warning-text: #9E4C00;
  --ds-tone-danger: #C9372C;
  --ds-tone-danger-subtle: #FFECEB;
  --ds-tone-danger-text: #AE2E24;
  --ds-tone-info: #357DE8;
  --ds-tone-info-subtle: #E9F2FE;
  --ds-tone-info-text: #1558BC;
  --ds-tone-discovery: #AF59E1;
  --ds-tone-discovery-subtle: #F8EEFE;
  --ds-tone-discovery-text: #803FA5;
  --ds-tone-neutral: #7D818A;
  --ds-tone-neutral-subtle: #F0F1F2;
  --ds-tone-neutral-text: #505258;
  --ds-tone-teal: #2898BD;
  --ds-tone-teal-subtle: #E7F9FF;
  --ds-tone-teal-text: #206A83;
  --ds-tone-orange: #E06C00;
  --ds-tone-orange-subtle: #FFF5DB;
  --ds-tone-orange-text: #9E4C00;
  --ds-danger-bold: #C9372C;
  --ds-chart-1: #357DE8;
  --ds-chart-2: #82B536;
  --ds-chart-3: #BF63F3;
  --ds-chart-4: #F68909;
  --ds-chart-5: #1558BC;
  --ds-chart-other: #8C8F97;
  --ds-shadow-raised: 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214F;
  --ds-shadow-overlay: 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214F;
  --ds-ink: #1E1F21;
  color-scheme: light;
}

/* Names the older stylesheets use, pointed at the tokens above (see design/tokens.ts). */
:root {
  --bg0: var(--ds-surface);
  --bg2: var(--ds-surface-overlay);
  --bg3: var(--ds-surface-hovered);
  --bg4: var(--ds-surface-pressed);
  --border: var(--ds-border);
  --accent: var(--ds-brand);
  --accent2: var(--ds-tone-teal);
  --success: var(--ds-tone-success);
  --warning: var(--ds-tone-warning);
  --danger: var(--ds-tone-danger);
  --on-accent: var(--ds-text-on-brand);
  --text0: var(--ds-text);
  --text1: var(--ds-text-subtle);
  --text2: var(--ds-text-subtlest);
  --font-ui: var(--ds-font-ui);
  --font-mono: var(--ds-font-ui);
}

/* One element held in one theme whatever the page theme (the sign-in screen: brand panel
   always dark, form always light). The same values as above, re-declared on the element. */
.ds-theme-dark {
  --ds-surface-sunken: #18191A;
  --ds-surface: #1F1F21;
  --ds-surface-raised: #242528;
  --ds-surface-overlay: #2B2C2F;
  --ds-surface-hovered: #242528;
  --ds-surface-pressed: #2B2C2F;
  --ds-surface-selected: #1C2B42;
  --ds-button-default: #CECED912;
  --ds-button-default-hovered: #E3E4F21F;
  --ds-item-hovered: #CECED912;
  --ds-border: #E3E4F21F;
  --ds-border-bold: #7E8188;
  --ds-border-focused: #8FB8F6;
  --ds-border-card: transparent;
  --ds-text: #CECFD2;
  --ds-text-subtle: #A9ABAF;
  --ds-text-subtlest: #96999E;
  --ds-text-inverse: #1F1F21;
  --ds-link: #669DF1;
  --ds-brand: #669DF1;
  --ds-brand-hovered: #8FB8F6;
  --ds-text-on-brand: #1F1F21;
  --ds-tone-success: #82B536;
  --ds-tone-success-subtle: #28311B;
  --ds-tone-success-text: #B3DF72;
  --ds-tone-warning: #FBC828;
  --ds-tone-warning-subtle: #3A2C1F;
  --ds-tone-warning-text: #FBC828;
  --ds-tone-danger: #F15B50;
  --ds-tone-danger-subtle: #42221F;
  --ds-tone-danger-text: #FD9891;
  --ds-tone-info: #4688EC;
  --ds-tone-info-subtle: #1C2B42;
  --ds-tone-info-text: #8FB8F6;
  --ds-tone-discovery: #BF63F3;
  --ds-tone-discovery-subtle: #35243F;
  --ds-tone-discovery-text: #D8A0F7;
  --ds-tone-neutral: #7E8188;
  --ds-tone-neutral-subtle: #303134;
  --ds-tone-neutral-text: #A9ABAF;
  --ds-tone-teal: #42B2D7;
  --ds-tone-teal-subtle: #1E3137;
  --ds-tone-teal-text: #9DD9EE;
  --ds-tone-orange: #F68909;
  --ds-tone-orange-subtle: #3A2C1F;
  --ds-tone-orange-text: #FBC828;
  --ds-danger-bold: #F87168;
  --ds-chart-1: #4688EC;
  --ds-chart-2: #94C748;
  --ds-chart-3: #C97CF4;
  --ds-chart-4: #FCA700;
  --ds-chart-5: #1558BC;
  --ds-chart-other: #7E8188;
  --ds-shadow-raised: 0px 0px 0px 1px #00000000, 0px 1px 1px #01040480, 0px 0px 1px #01040480;
  --ds-shadow-overlay: 0px 0px 0px 1px #BDBDBD1F, 0px 8px 12px #0104045C, 0px 0px 1px 1px #01040480;
  --ds-ink: #010404;
  --bg0: var(--ds-surface);
  --bg2: var(--ds-surface-overlay);
  --bg3: var(--ds-surface-hovered);
  --bg4: var(--ds-surface-pressed);
  --border: var(--ds-border);
  --accent: var(--ds-brand);
  --accent2: var(--ds-tone-teal);
  --success: var(--ds-tone-success);
  --warning: var(--ds-tone-warning);
  --danger: var(--ds-tone-danger);
  --on-accent: var(--ds-text-on-brand);
  --text0: var(--ds-text);
  --text1: var(--ds-text-subtle);
  --text2: var(--ds-text-subtlest);
  --font-ui: var(--ds-font-ui);
  --font-mono: var(--ds-font-ui);
  color-scheme: dark;
}

.ds-theme-light {
  --ds-surface-sunken: #F8F8F8;
  --ds-surface: #FFFFFF;
  --ds-surface-raised: #FFFFFF;
  --ds-surface-overlay: #FFFFFF;
  --ds-surface-hovered: #F0F1F2;
  --ds-surface-pressed: #DDDEE1;
  --ds-surface-selected: #E9F2FE;
  --ds-button-default: #0515240F;
  --ds-button-default-hovered: #0B120E24;
  --ds-item-hovered: #0515240F;
  --ds-border: #0B120E24;
  --ds-border-bold: #7D818A;
  --ds-border-focused: #4688EC;
  --ds-border-card: #0B120E24;
  --ds-text: #292A2E;
  --ds-text-subtle: #505258;
  --ds-text-subtlest: #6B6E76;
  --ds-text-inverse: #FFFFFF;
  --ds-link: #1868DB;
  --ds-brand: #1868DB;
  --ds-brand-hovered: #1558BC;
  --ds-text-on-brand: #FFFFFF;
  --ds-tone-success: #6A9A23;
  --ds-tone-success-subtle: #EFFFD6;
  --ds-tone-success-text: #4C6B1F;
  --ds-tone-warning: #E06C00;
  --ds-tone-warning-subtle: #FFF5DB;
  --ds-tone-warning-text: #9E4C00;
  --ds-tone-danger: #C9372C;
  --ds-tone-danger-subtle: #FFECEB;
  --ds-tone-danger-text: #AE2E24;
  --ds-tone-info: #357DE8;
  --ds-tone-info-subtle: #E9F2FE;
  --ds-tone-info-text: #1558BC;
  --ds-tone-discovery: #AF59E1;
  --ds-tone-discovery-subtle: #F8EEFE;
  --ds-tone-discovery-text: #803FA5;
  --ds-tone-neutral: #7D818A;
  --ds-tone-neutral-subtle: #F0F1F2;
  --ds-tone-neutral-text: #505258;
  --ds-tone-teal: #2898BD;
  --ds-tone-teal-subtle: #E7F9FF;
  --ds-tone-teal-text: #206A83;
  --ds-tone-orange: #E06C00;
  --ds-tone-orange-subtle: #FFF5DB;
  --ds-tone-orange-text: #9E4C00;
  --ds-danger-bold: #C9372C;
  --ds-chart-1: #357DE8;
  --ds-chart-2: #82B536;
  --ds-chart-3: #BF63F3;
  --ds-chart-4: #F68909;
  --ds-chart-5: #1558BC;
  --ds-chart-other: #8C8F97;
  --ds-shadow-raised: 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214F;
  --ds-shadow-overlay: 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214F;
  --ds-ink: #1E1F21;
  --bg0: var(--ds-surface);
  --bg2: var(--ds-surface-overlay);
  --bg3: var(--ds-surface-hovered);
  --bg4: var(--ds-surface-pressed);
  --border: var(--ds-border);
  --accent: var(--ds-brand);
  --accent2: var(--ds-tone-teal);
  --success: var(--ds-tone-success);
  --warning: var(--ds-tone-warning);
  --danger: var(--ds-tone-danger);
  --on-accent: var(--ds-text-on-brand);
  --text0: var(--ds-text);
  --text1: var(--ds-text-subtle);
  --text2: var(--ds-text-subtlest);
  --font-ui: var(--ds-font-ui);
  --font-mono: var(--ds-font-ui);
  color-scheme: light;
}

/* Tone classes: set --tone / --tone-subtle / --tone-text for any component (lozenge,
   status icon, avatar, banner). One class per tone in design/tokens.ts. */
.ds-tone-info {
  --tone: var(--ds-tone-info);
  --tone-subtle: var(--ds-tone-info-subtle);
  --tone-text: var(--ds-tone-info-text);
}

.ds-tone-success {
  --tone: var(--ds-tone-success);
  --tone-subtle: var(--ds-tone-success-subtle);
  --tone-text: var(--ds-tone-success-text);
}

.ds-tone-warning {
  --tone: var(--ds-tone-warning);
  --tone-subtle: var(--ds-tone-warning-subtle);
  --tone-text: var(--ds-tone-warning-text);
}

.ds-tone-danger {
  --tone: var(--ds-tone-danger);
  --tone-subtle: var(--ds-tone-danger-subtle);
  --tone-text: var(--ds-tone-danger-text);
}

.ds-tone-discovery {
  --tone: var(--ds-tone-discovery);
  --tone-subtle: var(--ds-tone-discovery-subtle);
  --tone-text: var(--ds-tone-discovery-text);
}

.ds-tone-teal {
  --tone: var(--ds-tone-teal);
  --tone-subtle: var(--ds-tone-teal-subtle);
  --tone-text: var(--ds-tone-teal-text);
}

.ds-tone-orange {
  --tone: var(--ds-tone-orange);
  --tone-subtle: var(--ds-tone-orange-subtle);
  --tone-text: var(--ds-tone-orange-text);
}

.ds-tone-neutral {
  --tone: var(--ds-tone-neutral);
  --tone-subtle: var(--ds-tone-neutral-subtle);
  --tone-text: var(--ds-tone-neutral-text);
}

} /* @layer tokens */