/* back.zone design system 1.0.0 — GENERATED FILE, DO NOT EDIT BY HAND.
   Source: bz.tokens.json · Build: node tools/build-tokens.mjs
   Theme: set data-theme="light" | "dark" on the root element; left unset it follows the system preference. */

:root {
  /* ── spacing ── */
  --bz-space-1: 4px;
  --bz-space-1-5: 6px;
  --bz-space-2: 8px;
  --bz-space-2-5: 10px;
  --bz-space-3: 12px;
  --bz-space-3-5: 14px;
  --bz-space-4: 16px;
  --bz-space-5: 20px;
  --bz-space-5-5: 22px;
  --bz-space-6-5: 26px;
  --bz-space-8-5: 34px;
  --bz-space-11: 44px;
  --bz-card-padding: 22px;
  --bz-plate-padding: 10px;
  --bz-row-padding-y: 15px;
  --bz-row-padding-x: 20px;
  --bz-form-gap: 7px;
  --bz-section-gap: 20px;
  --bz-page-padding: clamp(14px, 2.6vw, 40px);

  /* ── radius ── */
  --bz-radius-xs: 4px; /* menu row, check box, icon chip */
  --bz-radius-sm: 5px; /* button, input, table row */
  --bz-radius-md: 6px; /* card, glass pane, overlay */
  --bz-radius-lg: 10px; /* plate */
  --bz-radius-xl: 18px; /* application window */
  --bz-radius-pill: 99px; /* dot, chip, progress, scrollbar */

  /* ── typography ── */
  --bz-font-sans: Figtree, system-ui, sans-serif;
  --bz-font-display: 'Space Grotesk', sans-serif;
  --bz-font-mono: 'JetBrains Mono', monospace;
  --bz-text-mono-xs-size: 10.5px; /* code annotation, recipe note */
  --bz-text-mono-xs-weight: 400;
  --bz-text-mono-xs-lh: 1.9;
  --bz-text-mono-xs-ls: 0;
  --bz-text-mono-xs-family: var(--bz-font-mono);
  --bz-text-label-size: 11px; /* column header, KPI label, form label */
  --bz-text-label-weight: 600;
  --bz-text-label-lh: 1.2;
  --bz-text-label-ls: 0.13em;
  --bz-text-label-family: var(--bz-font-sans);
  --bz-text-caption-size: 12.5px; /* help text, secondary line, chip */
  --bz-text-caption-weight: 400;
  --bz-text-caption-lh: 1.45;
  --bz-text-caption-ls: 0;
  --bz-text-caption-family: var(--bz-font-sans);
  --bz-text-body-size: 13.5px; /* DEFAULT. table cell, input, body text */
  --bz-text-body-weight: 400;
  --bz-text-body-lh: 1.5;
  --bz-text-body-ls: 0;
  --bz-text-body-family: var(--bz-font-sans);
  --bz-text-body-md-size: 15px; /* primary row text, list name */
  --bz-text-body-md-weight: 400;
  --bz-text-body-md-lh: 1.5;
  --bz-text-body-md-ls: 0;
  --bz-text-body-md-family: var(--bz-font-sans);
  --bz-text-subtitle-size: 17px; /* card subtitle, drawer row title */
  --bz-text-subtitle-weight: 500;
  --bz-text-subtitle-lh: 1.4;
  --bz-text-subtitle-ls: -0.01em;
  --bz-text-subtitle-family: var(--bz-font-sans);
  --bz-text-title-size: 20px; /* card title, modal title */
  --bz-text-title-weight: 500;
  --bz-text-title-lh: 1.3;
  --bz-text-title-ls: -0.015em;
  --bz-text-title-family: var(--bz-font-sans);
  --bz-text-section-size: 26px; /* guide section title, drawer title */
  --bz-text-section-weight: 500;
  --bz-text-section-lh: 1.15;
  --bz-text-section-ls: -0.02em;
  --bz-text-section-family: var(--bz-font-sans);
  --bz-text-page-size: clamp(24px, 2.8vw, 31px); /* page title (Storage, Jobs) */
  --bz-text-page-weight: 500;
  --bz-text-page-lh: 1.1;
  --bz-text-page-ls: -0.015em;
  --bz-text-page-family: var(--bz-font-sans);
  --bz-text-metric-size: clamp(28px, 3.2vw, 38px); /* KPI number */
  --bz-text-metric-weight: 500;
  --bz-text-metric-lh: 1;
  --bz-text-metric-ls: -0.025em;
  --bz-text-metric-family: var(--bz-font-display);
  --bz-text-hero-size: 52px; /* Login left column */
  --bz-text-hero-weight: 500;
  --bz-text-hero-lh: 1.05;
  --bz-text-hero-ls: -0.03em;
  --bz-text-hero-family: var(--bz-font-display);
  --bz-icon-xs: 15px;
  --bz-icon-sm: 18px;
  --bz-icon-md: 20px;
  --bz-icon-lg: 21px;
  --bz-icon-xl: 24px;

  /* ── breakpoints and containers (informational; cannot be used inside @media) ── */
  --bz-bp-xs: 0; /* 0–599 */
  --bz-bp-sm: 600px; /* 600–899 */
  --bz-bp-md: 900px; /* 900–1279 */
  --bz-bp-lg: 1280px; /* 1280–1479 */
  --bz-bp-xl: 1480px; /* 1480+ */
  --bz-window-max-width: 1480px;
  --bz-sidebar-expanded: 270px;
  --bz-sidebar-collapsed: 84px;
  --bz-drawer-width: 420px;
  --bz-drawer-max-width: 92vw;
  --bz-modal-width: 480px;
  --bz-modal-max-width: 92vw;
  --bz-table-viewport-max-height: 392px;

  /* ── motion ── */
  --bz-ease-standard: cubic-bezier(0.32,0.72,0,1);
  --bz-ease-linear: cubic-bezier(0,0,1,1);
  --bz-dur-fast: 140ms; /* colour, hover, opacity */
  --bz-dur-base: 240ms; /* pane opening, arrow rotation, toast */
  --bz-dur-press: 160ms; /* 1px drop + the shadow turning inward */
  --bz-dur-slow: 500ms; /* menu collapse, header card closing */

  /* ── stacking order ── */
  --bz-z-content: 1;
  --bz-z-card-header-band: 2;
  --bz-z-sticky-table-header: 3;
  --bz-z-selected-nav-item: 5;
  --bz-z-popover: 20;
  --bz-z-dock: 30;
  --bz-z-drawer: 40;
  --bz-z-modal: 50;
  --bz-z-backdrop: 49;
  --bz-z-toast: 60;

  /* ── surface ── */
  --bz-surface-desk: rgb(236 238 243);
  --bz-surface-window: rgb(255 255 255);
  --bz-surface-page: rgb(250 250 252);
  --bz-surface-rail: rgb(245 244 248);
  --bz-surface-card: rgb(255 255 255);
  --bz-surface-well: rgb(236 236 242);
  --bz-surface-well-focus: rgb(244 244 249);
  --bz-surface-plate: var(--bz-surface-card);

  /* ── ink ── */
  --bz-ink-heading: rgb(61 65 87);
  --bz-ink-body: rgb(78 82 104);
  --bz-ink-secondary: rgb(106 110 131);
  --bz-ink-muted: rgb(138 141 160);
  --bz-ink-label: rgb(106 110 131);
  --bz-ink-on-accent: rgb(255 255 255);

  /* ── line ── */
  --bz-line-hairline: rgb(241 240 246);
  --bz-line-rail-border: rgb(230 227 238);
  --bz-line-specular: rgb(255 255 255);
  --bz-line-edge-bottom: rgba(88,94,128,0.07);

  /* ── accent ── */
  --bz-accent-base: rgb(124 98 242);
  --bz-accent-hover: rgb(109 81 238);
  --bz-accent-light: rgb(164 147 250);
  --bz-accent-link: rgb(91 69 214);
  --bz-accent-link-hover: rgb(79 63 208);
  --bz-accent-emboss: rgb(95 69 207);

  /* ── status ── */
  --bz-status-healthy: rgb(38 189 140);
  --bz-status-degraded: rgb(242 164 31);
  --bz-status-error: rgb(229 48 63);
  --bz-status-error-ink: rgb(179 32 46);
  --bz-status-info: rgb(91 141 239);
  --bz-status-idle: rgb(196 198 210);
  --bz-status-idle-stripe: rgb(167 170 187);
  --bz-status-idle-ink: rgb(78 82 104);
  --bz-status-healthy-ink: rgb(19 98 73);
  --bz-status-degraded-ink: rgb(125 82 10);
  --bz-status-info-ink: rgb(40 83 168);
  --bz-status-healthy-light: rgb(139 235 201);
  --bz-status-degraded-light: rgb(255 216 148);
  --bz-status-error-light: rgb(255 156 166);
  --bz-status-info-light: rgb(169 205 250);
  --bz-status-idle-light: rgb(220 222 232);
  --bz-status-healthy-tint: rgb(227 244 237);
  --bz-status-degraded-tint: rgb(251 240 220);
  --bz-status-error-tint: rgb(251 230 232);
  --bz-status-info-tint: rgb(229 237 251);
  --bz-status-idle-tint: rgb(236 236 242);

  /* ── elevation ── */
  --bz-e0: inset 0 1px 0 0 rgb(255 255 255); /* flat */
  --bz-e1: inset 0 2px 4px 0 rgba(104,106,134,0.28), inset 0 -1px 0 0 rgba(255,255,255,0.9); /* well: a recessed surface (input, progress track, rail) */
  --bz-e2: inset 0 1px 0 0 rgb(255 255 255), inset 0 -1px 0 0 rgba(88,94,128,0.07), 0 1px 1px 0 rgba(78,82,112,0.13), 0 2px 2px -1px rgba(78,82,112,0.15), 0 5px 7px -3px rgba(78,82,112,0.17), 0 12px 16px -9px rgba(78,82,112,0.14); /* card: a resting surface */
  --bz-e2-plate: inset 0 1px 0 0 rgb(255 255 255), 0 1px 2px 0 rgba(88,94,128,0.1), 0 6px 12px -4px rgba(88,94,128,0.18), 0 20px 30px -12px rgba(88,94,128,0.22); /* plate: a card sheet (radius lg) */
  --bz-e3: inset 0 1px 0 0 rgba(255,255,255,0.55), 0 1px 1px 0 rgba(78,82,112,0.13), 0 2px 3px -1px rgba(78,82,112,0.15), 0 6px 10px -4px rgba(78,82,112,0.16); /* control: button, icon button */
  --bz-e4: inset 0 1px 0 0 rgba(255,255,255,0.55), 0 1px 1px 0 rgba(78,82,112,0.13), 0 2px 3px -1px rgba(78,82,112,0.15), 0 6px 10px -4px rgba(78,82,112,0.16), 0 10px 16px -6px rgba(78,82,112,0.18), 0 22px 30px -16px rgba(78,82,112,0.22); /* floating pane: menu, popover, tooltip, toast */
  --bz-e5: 0 1px 2px 0 rgba(78,82,112,0.14), 0 6px 14px -6px rgba(78,82,112,0.24), 0 30px 60px -24px rgba(66,70,102,0.4); /* modal / drawer */
  --bz-window: 0 44px 90px -44px rgba(86,92,128,0.5), 0 6px 18px -6px rgba(86,92,128,0.16); /* application window (on the desk) */
  --bz-press: inset 0 2px 4px 0 rgba(104,106,134,0.22), 0 1px 1px 0 rgba(78,82,112,0.1); /* pressed state: the shadow turns inward, the surface drops 1px */
  --bz-press-translate-y: 1px;

  /* ── glass ── */
  --bz-glass-place-bg: linear-gradient(180deg, rgba(214,216,229,0.78) 0%, rgba(199,202,219,0.62) 100%); /* says where you are: the selected menu item, card header band, selected row in a menu, selected table row. DECISION 24 Oct 2026: place = location + in-place state (selected menu, selected row, inline alert, with no blur on the alert). Floating overlays stay on control glass. */
  --bz-glass-place-filter: blur(22px) saturate(145%);
  --bz-glass-place-edge-top: rgba(255,255,255,0.8);
  --bz-glass-place-edge-bottom: rgba(108,110,142,0.12);
  --bz-glass-place-inner-top: 0.55;
  --bz-glass-place-inner-bottom: 0.28;
  --bz-glass-control-bg: linear-gradient(180deg, rgba(253,253,255,0.92) 0%, rgba(238,239,247,0.72) 100%); /* dropdown menu background, dock, context menu: ONLY floating overlays. The secondary button was REMOVED from this role: a button sits inside a card with an opaque card behind it, so the blur refracts nothing. For buttons use surfaceOpaque.control. */
  --bz-glass-control-filter: blur(20px) saturate(150%);
  --bz-glass-control-edge-top: rgba(255,255,255,0.9);
  --bz-glass-control-edge-bottom: rgba(108,110,142,0.14);
  --bz-glass-primary-bg: linear-gradient(180deg, rgba(134,113,249,0.95) 0%, rgba(101,78,236,0.94) 100%); /* the main action: only inside a floating overlay. A primary button within a plane uses surfaceOpaque.primary. */
  --bz-glass-primary-filter: blur(20px) saturate(160%);
  --bz-glass-primary-edge-top: rgba(255,255,255,0.38);
  --bz-glass-primary-edge-bottom: rgba(60,44,150,0.3);
  --bz-scrim-bg: rgba(28,26,44,0.28);
  --bz-scrim-filter: blur(10px);

  /* ── focus ── */
  --bz-focus-ring: 0 0 0 2px rgba(124,98,242,0.7);
  --bz-focus-color: rgb(124 98 242);
  --bz-well-focus-fill: rgb(244 244 249);
  --bz-well-focus-inset-opacity: 0.18;

  /* ── component recipes ── */
  --bz-opaque-control-bg: linear-gradient(180deg,#FDFDFF,#EEEFF7);
  --bz-opaque-primary-bg: linear-gradient(180deg,#8671F9,#654EEC);
  --bz-opaque-danger-ghost-bg: linear-gradient(180deg,#FFF7F5,#FCEBE7);
  --bz-opaque-danger-filled-bg: linear-gradient(180deg,#F07458,#D8492A);
  --bz-alert-fill: linear-gradient(180deg,#DFE1EB,#DCDEE9);
  --bz-stripe-width: 5px;
  --bz-stripe-accent: linear-gradient(180deg, var(--bz-accent-light), var(--bz-accent-base));
  --bz-stripe-healthy: linear-gradient(180deg, var(--bz-status-healthy-light), var(--bz-status-healthy));
  --bz-stripe-degraded: linear-gradient(180deg, var(--bz-status-degraded-light), var(--bz-status-degraded));
  --bz-stripe-error: linear-gradient(180deg, var(--bz-status-error-light), var(--bz-status-error));
  --bz-stripe-info: linear-gradient(180deg, var(--bz-status-info-light), var(--bz-status-info));
  --bz-well-error-fill: rgb(241 233 238);
  --bz-well-error-fill-focus: rgb(247 240 243);
}

[data-theme="dark"] {
  /* ── surface ── */
  --bz-surface-desk: rgb(17 17 24);
  --bz-surface-window: rgb(27 27 35);
  --bz-surface-page: rgb(32 32 42);
  --bz-surface-rail: rgb(25 25 33);
  --bz-surface-card: rgb(41 41 51);
  --bz-surface-plate: rgb(34 34 44);
  --bz-surface-well: rgb(21 21 29);
  --bz-surface-well-focus: rgb(29 29 39);

  /* ── ink ── */
  --bz-ink-heading: rgb(233 235 243);
  --bz-ink-body: rgb(201 203 217);
  --bz-ink-secondary: rgb(167 170 187);
  --bz-ink-muted: rgb(146 150 169);
  --bz-ink-label: rgb(131 135 155);
  --bz-ink-on-accent: rgb(255 255 255);

  /* ── line ── */
  --bz-line-hairline: rgb(48 48 60);
  --bz-line-rail-border: rgb(48 48 60);
  --bz-line-specular: rgba(255,255,255,0.085);
  --bz-line-edge-bottom: rgba(0,0,0,0.35);

  /* ── accent ── */
  --bz-accent-base: rgb(165 143 255);
  --bz-accent-hover: rgb(183 166 255);
  --bz-accent-light: rgb(200 188 255);
  --bz-accent-link: rgb(165 143 255);
  --bz-accent-link-hover: rgb(200 188 255);
  --bz-accent-emboss: rgb(95 69 207);

  /* ── status ── */
  --bz-status-healthy: rgb(62 211 160);
  --bz-status-degraded: rgb(240 183 78);
  --bz-status-error: rgb(255 127 99);
  --bz-status-error-ink: rgb(255 144 120);
  --bz-status-info: rgb(130 178 255);
  --bz-status-idle: rgb(74 76 92);
  --bz-status-idle-stripe: rgb(106 108 124);
  --bz-status-idle-ink: rgb(167 170 187);
  --bz-status-healthy-ink: rgb(62 211 160);
  --bz-status-degraded-ink: rgb(240 183 78);
  --bz-status-info-ink: rgb(130 178 255);
  --bz-status-healthy-light: rgb(139 235 201);
  --bz-status-degraded-light: rgb(255 216 148);
  --bz-status-error-light: rgb(255 156 166);
  --bz-status-info-light: rgb(169 205 250);
  --bz-status-idle-light: rgb(90 92 108);
  --bz-status-healthy-tint: rgba(62,211,160,0.11);
  --bz-status-degraded-tint: rgba(240,183,78,0.11);
  --bz-status-error-tint: rgba(255,144,120,0.11);
  --bz-status-info-tint: rgba(130,178,255,0.11);
  --bz-status-idle-tint: rgb(34 34 44);

  /* ── elevation ── */
  --bz-e0: inset 0 1px 0 0 rgba(255,255,255,0.085); /* flat */
  --bz-e1: inset 0 2px 4px 0 rgba(0,0,0,0.55), inset 0 -1px 0 0 rgba(255,255,255,0.06); /* well: a recessed surface (input, progress track, rail) */
  --bz-e2: inset 0 1px 0 0 rgba(255,255,255,0.085), inset 0 -1px 0 0 rgba(0,0,0,0.112), 0 1px 1px 0 rgba(0,0,0,0.208), 0 2px 2px -1px rgba(0,0,0,0.24), 0 5px 7px -3px rgba(0,0,0,0.272), 0 12px 16px -9px rgba(0,0,0,0.224); /* card: a resting surface */
  --bz-e2-plate: inset 0 1px 0 0 rgba(255,255,255,0.06), 0 1px 2px 0 rgba(0,0,0,0.16), 0 6px 12px -4px rgba(0,0,0,0.288), 0 20px 30px -12px rgba(0,0,0,0.352); /* plate: a card sheet (radius lg) */
  --bz-e3: inset 0 1px 0 0 rgba(255,255,255,0.06), 0 1px 1px 0 rgba(0,0,0,0.208), 0 2px 3px -1px rgba(0,0,0,0.24), 0 6px 10px -4px rgba(0,0,0,0.256); /* control: button, icon button */
  --bz-e4: inset 0 1px 0 0 rgba(255,255,255,0.06), 0 1px 1px 0 rgba(0,0,0,0.208), 0 2px 3px -1px rgba(0,0,0,0.24), 0 6px 10px -4px rgba(0,0,0,0.256), 0 10px 16px -6px rgba(0,0,0,0.288), 0 22px 30px -16px rgba(0,0,0,0.352); /* floating pane: menu, popover, tooltip, toast */
  --bz-e5: 0 1px 2px 0 rgba(0,0,0,0.224), 0 6px 14px -6px rgba(0,0,0,0.384), 0 30px 60px -24px rgba(0,0,0,0.64); /* modal / drawer */
  --bz-window: 0 44px 90px -44px rgba(0,0,0,0.8), 0 6px 18px -6px rgba(0,0,0,0.256); /* application window (on the desk) */
  --bz-press: inset 0 2px 4px 0 rgba(0,0,0,0.352), 0 1px 1px 0 rgba(0,0,0,0.16); /* pressed state: the shadow turns inward, the surface drops 1px */
  --bz-press-translate-y: 1px;

  /* ── glass ── */
  --bz-glass-place-bg: linear-gradient(180deg, rgba(58,58,72,0.72) 0%, rgba(44,44,56,0.62) 100%); /* says where you are: the selected menu item, card header band, selected row in a menu, selected table row. DECISION 24 Oct 2026: place = location + in-place state (selected menu, selected row, inline alert, with no blur on the alert). Floating overlays stay on control glass. */
  --bz-glass-place-filter: blur(22px) saturate(130%);
  --bz-glass-place-edge-top: rgba(255,255,255,0.09);
  --bz-glass-place-edge-bottom: rgba(0,0,0,0.34);
  --bz-glass-place-inner-top: 0.08;
  --bz-glass-place-inner-bottom: 0.03;
  --bz-glass-control-bg: linear-gradient(180deg, rgba(51,51,63,0.9) 0%, rgba(38,38,47,0.76) 100%); /* dropdown menu background, dock, context menu: ONLY floating overlays. The secondary button was REMOVED from this role: a button sits inside a card with an opaque card behind it, so the blur refracts nothing. For buttons use surfaceOpaque.control. */
  --bz-glass-control-filter: blur(20px) saturate(135%);
  --bz-glass-control-edge-top: rgba(255,255,255,0.1);
  --bz-glass-control-edge-bottom: rgba(0,0,0,0.4);
  --bz-glass-primary-bg: linear-gradient(180deg, rgba(142,119,255,0.95) 0%, rgba(107,82,240,0.94) 100%); /* the main action: only inside a floating overlay. A primary button within a plane uses surfaceOpaque.primary. */
  --bz-glass-primary-filter: blur(20px) saturate(155%);
  --bz-glass-primary-edge-top: rgba(255,255,255,0.24);
  --bz-glass-primary-edge-bottom: rgba(0,0,0,0.38);
  --bz-scrim-bg: rgba(0,0,0,0.48);
  --bz-scrim-filter: blur(10px);

  /* ── focus ── */
  --bz-focus-ring: 0 0 0 2px rgba(165,143,255,0.7);
  --bz-focus-color: rgb(165 143 255);
  --bz-well-focus-fill: rgb(29 29 39);
  --bz-well-focus-inset-opacity: 0.45;

  /* ── component recipes ── */
  --bz-opaque-control-bg: linear-gradient(180deg,#33333F,#26262F);
  --bz-opaque-primary-bg: linear-gradient(180deg,#8671F9,#654EEC);
  --bz-opaque-danger-ghost-bg: linear-gradient(180deg,#47353A,#382F36);
  --bz-opaque-danger-filled-bg: linear-gradient(180deg,#F07458,#D8492A);
  --bz-alert-fill: rgba(255,255,255,0.06);
  --bz-stripe-width: 5px;
  --bz-stripe-accent: linear-gradient(180deg, var(--bz-accent-light), var(--bz-accent-base));
  --bz-stripe-healthy: linear-gradient(180deg, var(--bz-status-healthy-light), var(--bz-status-healthy));
  --bz-stripe-degraded: linear-gradient(180deg, var(--bz-status-degraded-light), var(--bz-status-degraded));
  --bz-stripe-error: linear-gradient(180deg, var(--bz-status-error-light), var(--bz-status-error));
  --bz-stripe-info: linear-gradient(180deg, var(--bz-status-info-light), var(--bz-status-info));
  --bz-well-error-fill: var(--bz-status-error-tint);
  --bz-well-error-fill-focus: var(--bz-status-error-tint);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* ── surface ── */
    --bz-surface-desk: rgb(17 17 24);
    --bz-surface-window: rgb(27 27 35);
    --bz-surface-page: rgb(32 32 42);
    --bz-surface-rail: rgb(25 25 33);
    --bz-surface-card: rgb(41 41 51);
    --bz-surface-plate: rgb(34 34 44);
    --bz-surface-well: rgb(21 21 29);
    --bz-surface-well-focus: rgb(29 29 39);

    /* ── ink ── */
    --bz-ink-heading: rgb(233 235 243);
    --bz-ink-body: rgb(201 203 217);
    --bz-ink-secondary: rgb(167 170 187);
    --bz-ink-muted: rgb(146 150 169);
    --bz-ink-label: rgb(131 135 155);
    --bz-ink-on-accent: rgb(255 255 255);

    /* ── line ── */
    --bz-line-hairline: rgb(48 48 60);
    --bz-line-rail-border: rgb(48 48 60);
    --bz-line-specular: rgba(255,255,255,0.085);
    --bz-line-edge-bottom: rgba(0,0,0,0.35);

    /* ── accent ── */
    --bz-accent-base: rgb(165 143 255);
    --bz-accent-hover: rgb(183 166 255);
    --bz-accent-light: rgb(200 188 255);
    --bz-accent-link: rgb(165 143 255);
    --bz-accent-link-hover: rgb(200 188 255);
    --bz-accent-emboss: rgb(95 69 207);

    /* ── status ── */
    --bz-status-healthy: rgb(62 211 160);
    --bz-status-degraded: rgb(240 183 78);
    --bz-status-error: rgb(255 127 99);
    --bz-status-error-ink: rgb(255 144 120);
    --bz-status-info: rgb(130 178 255);
    --bz-status-idle: rgb(74 76 92);
    --bz-status-idle-stripe: rgb(106 108 124);
    --bz-status-idle-ink: rgb(167 170 187);
    --bz-status-healthy-ink: rgb(62 211 160);
    --bz-status-degraded-ink: rgb(240 183 78);
    --bz-status-info-ink: rgb(130 178 255);
    --bz-status-healthy-light: rgb(139 235 201);
    --bz-status-degraded-light: rgb(255 216 148);
    --bz-status-error-light: rgb(255 156 166);
    --bz-status-info-light: rgb(169 205 250);
    --bz-status-idle-light: rgb(90 92 108);
    --bz-status-healthy-tint: rgba(62,211,160,0.11);
    --bz-status-degraded-tint: rgba(240,183,78,0.11);
    --bz-status-error-tint: rgba(255,144,120,0.11);
    --bz-status-info-tint: rgba(130,178,255,0.11);
    --bz-status-idle-tint: rgb(34 34 44);

    /* ── elevation ── */
    --bz-e0: inset 0 1px 0 0 rgba(255,255,255,0.085); /* flat */
    --bz-e1: inset 0 2px 4px 0 rgba(0,0,0,0.55), inset 0 -1px 0 0 rgba(255,255,255,0.06); /* well: a recessed surface (input, progress track, rail) */
    --bz-e2: inset 0 1px 0 0 rgba(255,255,255,0.085), inset 0 -1px 0 0 rgba(0,0,0,0.112), 0 1px 1px 0 rgba(0,0,0,0.208), 0 2px 2px -1px rgba(0,0,0,0.24), 0 5px 7px -3px rgba(0,0,0,0.272), 0 12px 16px -9px rgba(0,0,0,0.224); /* card: a resting surface */
    --bz-e2-plate: inset 0 1px 0 0 rgba(255,255,255,0.06), 0 1px 2px 0 rgba(0,0,0,0.16), 0 6px 12px -4px rgba(0,0,0,0.288), 0 20px 30px -12px rgba(0,0,0,0.352); /* plate: a card sheet (radius lg) */
    --bz-e3: inset 0 1px 0 0 rgba(255,255,255,0.06), 0 1px 1px 0 rgba(0,0,0,0.208), 0 2px 3px -1px rgba(0,0,0,0.24), 0 6px 10px -4px rgba(0,0,0,0.256); /* control: button, icon button */
    --bz-e4: inset 0 1px 0 0 rgba(255,255,255,0.06), 0 1px 1px 0 rgba(0,0,0,0.208), 0 2px 3px -1px rgba(0,0,0,0.24), 0 6px 10px -4px rgba(0,0,0,0.256), 0 10px 16px -6px rgba(0,0,0,0.288), 0 22px 30px -16px rgba(0,0,0,0.352); /* floating pane: menu, popover, tooltip, toast */
    --bz-e5: 0 1px 2px 0 rgba(0,0,0,0.224), 0 6px 14px -6px rgba(0,0,0,0.384), 0 30px 60px -24px rgba(0,0,0,0.64); /* modal / drawer */
    --bz-window: 0 44px 90px -44px rgba(0,0,0,0.8), 0 6px 18px -6px rgba(0,0,0,0.256); /* application window (on the desk) */
    --bz-press: inset 0 2px 4px 0 rgba(0,0,0,0.352), 0 1px 1px 0 rgba(0,0,0,0.16); /* pressed state: the shadow turns inward, the surface drops 1px */
    --bz-press-translate-y: 1px;

    /* ── glass ── */
    --bz-glass-place-bg: linear-gradient(180deg, rgba(58,58,72,0.72) 0%, rgba(44,44,56,0.62) 100%); /* says where you are: the selected menu item, card header band, selected row in a menu, selected table row. DECISION 24 Oct 2026: place = location + in-place state (selected menu, selected row, inline alert, with no blur on the alert). Floating overlays stay on control glass. */
    --bz-glass-place-filter: blur(22px) saturate(130%);
    --bz-glass-place-edge-top: rgba(255,255,255,0.09);
    --bz-glass-place-edge-bottom: rgba(0,0,0,0.34);
    --bz-glass-place-inner-top: 0.08;
    --bz-glass-place-inner-bottom: 0.03;
    --bz-glass-control-bg: linear-gradient(180deg, rgba(51,51,63,0.9) 0%, rgba(38,38,47,0.76) 100%); /* dropdown menu background, dock, context menu: ONLY floating overlays. The secondary button was REMOVED from this role: a button sits inside a card with an opaque card behind it, so the blur refracts nothing. For buttons use surfaceOpaque.control. */
    --bz-glass-control-filter: blur(20px) saturate(135%);
    --bz-glass-control-edge-top: rgba(255,255,255,0.1);
    --bz-glass-control-edge-bottom: rgba(0,0,0,0.4);
    --bz-glass-primary-bg: linear-gradient(180deg, rgba(142,119,255,0.95) 0%, rgba(107,82,240,0.94) 100%); /* the main action: only inside a floating overlay. A primary button within a plane uses surfaceOpaque.primary. */
    --bz-glass-primary-filter: blur(20px) saturate(155%);
    --bz-glass-primary-edge-top: rgba(255,255,255,0.24);
    --bz-glass-primary-edge-bottom: rgba(0,0,0,0.38);
    --bz-scrim-bg: rgba(0,0,0,0.48);
    --bz-scrim-filter: blur(10px);

    /* ── focus ── */
    --bz-focus-ring: 0 0 0 2px rgba(165,143,255,0.7);
    --bz-focus-color: rgb(165 143 255);
    --bz-well-focus-fill: rgb(29 29 39);
    --bz-well-focus-inset-opacity: 0.45;

    /* ── component recipes ── */
    --bz-opaque-control-bg: linear-gradient(180deg,#33333F,#26262F);
    --bz-opaque-primary-bg: linear-gradient(180deg,#8671F9,#654EEC);
    --bz-opaque-danger-ghost-bg: linear-gradient(180deg,#47353A,#382F36);
    --bz-opaque-danger-filled-bg: linear-gradient(180deg,#F07458,#D8492A);
    --bz-alert-fill: rgba(255,255,255,0.06);
    --bz-stripe-width: 5px;
    --bz-stripe-accent: linear-gradient(180deg, var(--bz-accent-light), var(--bz-accent-base));
    --bz-stripe-healthy: linear-gradient(180deg, var(--bz-status-healthy-light), var(--bz-status-healthy));
    --bz-stripe-degraded: linear-gradient(180deg, var(--bz-status-degraded-light), var(--bz-status-degraded));
    --bz-stripe-error: linear-gradient(180deg, var(--bz-status-error-light), var(--bz-status-error));
    --bz-stripe-info: linear-gradient(180deg, var(--bz-status-info-light), var(--bz-status-info));
    --bz-well-error-fill: var(--bz-status-error-tint);
    --bz-well-error-fill-focus: var(--bz-status-error-tint);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bz-dur-fast: 0ms;
    --bz-dur-base: 0ms;
    --bz-dur-press: 0ms;
    --bz-dur-slow: 0ms;
  }
}