:root {
  /* Colors — dark default; light via html.theme-light */
  --color-surface: #2c2a26;
  --color-header-surface: var(--color-surface);
  --color-surface-soft: #383530;
  --color-text: #f1f5f9;
  --color-text-muted: rgba(255, 255, 255, 0.45);
  --color-primary: #e8e4df;
  --color-primary-on: #1c1917;
  --color-success: #4ade80;
  --color-warning: #f59e0b;
  --color-danger: #f87171;
  --color-info: #61b6fb;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-brand-logo: #ffffff;

  /* Testing pyramid @Layer — palette A (cool → warm) */
  --layer-unit: #94ca66;
  --layer-component: #ffa833;
  --layer-integration: #a65ac4;
  --layer-api: #ffd833;
  --layer-e2e: #ff574f;
  --layer-manual: #61b6fb;
  --layer-other: #5d6876;

  /* Allure 3 chart status / family swatches (charts-api semantic.scss).
     Used by widget-tile mocks + status-family indicators in the tile bar. */
  --color-status-passed-chart: #49cb68;
  --color-status-failed: #fd5a3e;
  --color-status-broken: #ffd050;
  --color-status-skipped: #aaaaaa;
  --color-status-unknown: #b46fd8;
  --color-status-orange: #ff8200;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Layout */
  --header-height: 40px;
  /* Occupied fixed-header band(s); doubles when metrics wrap (see header.css). */
  --header-occupied-height: var(--header-height);
  --header-brand-logo-height: 22px;
  --z-header: 100;
  --content-max-width: 1300px;
  --page-padding-x: var(--space-4);

  /* Breakpoints — canonical widths (px). Referenced literally in @media, since
     CSS var() is not valid inside a media condition; this block is the SSOT.
     Shell edge (header default / sticky / configurator):
       ≤768 mobile · ≥769 desktop
     768  : default header → burger (nav + tools); widget-mosaic → 1 col;
            configurator terminal stack (cfg → 3–4, term under)
     769  : sticky panel/section; configurator continuous shed (≥769 formula)
     900  : metrics header hides secondary tools (lang/theme/GitHub)
     1023 : default header hides search
     1100 : soft mid (same continuous formula; no track rebuild)
     1280 : soft mid
     1360 : metrics header hides search
     1600 : configurator rest / params 2-up
            ≥769: gutter|cfg|term clamp — shed 6→5→col1→cfg→term→stack
            **no** grid-template jump at 1100/900
     metrics nav-fold + wrap → content-driven
       `.header--metrics-nav-fold` / `.header--metrics-wrap`
       (js/header-metrics-wrap.js), not fixed px */

  /* Component sizes — canonical; see docs/component-sizes.md */
  --control-height-md: 36px;
  --plaque-control-height: 32px;
  --plaque-label-width: 5.5rem;
  --plaque-label-width-wide: 10rem;
  --plaque-mixed-label-cqi: 44cqi;
  --plaque-seg-gap: 5px;
  /* Wrap band inside shell border (= control − 2×1px). --many flex lines
     are this tall (chip margin-block). Outer: n×band + (n−1)×row-gap + 2 border.
     Label/divider optically center in band 1 only (rule plaque-many-first-row). */
  --plaque-seg-band-height: calc(var(--plaque-control-height) - 2px);
  /* 1px rule between wrapped --many bands (= flex row-gap; gradient origin padding-box). */
  --plaque-seg-row-gap: 1px;
  /* Shell ↔ seg btn. chip-air = vertical margin of ~20px glyph in band;
     shell-end uses the same token so top/bottom/right air match (no hardcode). */
  --plaque-seg-inset: var(--space-1);
  --plaque-shell-pad-x: var(--space-2);
  --plaque-seg-chip-height: calc(var(--plaque-control-height) - 12px);
  --plaque-seg-chip-air: calc(
    (var(--plaque-seg-band-height) - var(--plaque-seg-chip-height)) / 2
  );
  --plaque-seg-shell-end: var(--plaque-seg-chip-air);
  /* Track no longer adds end pad — --many uses shell-end only (= chip-air). */
  --plaque-seg-track-end: 0px;
  --plaque-chevron-size: 10px;
  --plaque-select-text-gap: 17px;
  --plaque-chevron-inset: calc(var(--plaque-shell-pad-x) + var(--plaque-seg-gap));
  --plaque-select-trail: calc(var(--plaque-chevron-inset) + var(--plaque-select-text-gap));
  /* Chevron distance from the plaque border, measured off the shell border-box —
     stays constant in every container (grid cell / stack / solo). */
  --plaque-chevron-edge: var(--plaque-shell-pad-x);
  --plaque-divider-height: calc(var(--font-size-sm) * 1.35);
  /* Air around vertical rule in a 32px shell (= inset of horizontal rule from sides). */
  --plaque-divider-inset: calc(
    (var(--plaque-control-height) - 2px - var(--plaque-divider-height)) / 2
  );
  --plaque-chevron-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23f1f5f9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-size-md: 18px;
  --input-min-width: 200px;
  --panel-dot-gap: 5px;
  --panel-dot-size: 8px;
  --panel-action-size: 28px;
  --panel-action-gap: 2px;
  /* Interactive window chrome — 30px hit area around a 15px signal circle.
     Colors preserve the original Selenoid VNC semantics. */
  --window-control-size: 30px;
  --window-control-dot-size: 15px;
  --window-control-glyph-size: 11px;
  --window-control-danger: #ff6e59;
  --window-control-info: #6883d3;
  --window-control-success: #59a781;
  --window-control-neutral: #405048;
  --connection-status-disconnecting: #ca9eff;
  /* Indicators — signal dots; see css/indicator.css. Decorative panel dots use
     macOS traffic-light hex (theme-independent); semantic/status dots read the
     --color-* tokens above. */
  --indicator-size: var(--panel-dot-size);
  --indicator-close: #ff5f57;
  --indicator-minimize: #febc2e;
  --indicator-maximize: #28c840;
  --lang-label-font-size: 8px;
  --lang-label-inset: 5px;

  /* Shape & motion */
  --radius-sm: 8px;
  --radius-md: 12px;
  --duration-fast: 120ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Typography */
  --font-sans: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.6875rem;

  /* Interactive surfaces */
  --hover-bg: rgba(255, 255, 255, 0.08);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-surface);
}

html.theme-light {
  --plaque-chevron-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231c1917' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --color-surface: #f2f2f2;
  --color-surface-soft: #ebebeb;
  --color-header-surface: #fafafa;
  --color-text: #1c1917;
  --color-text-muted: rgba(28, 25, 23, 0.55);
  --color-border: rgba(28, 25, 23, 0.12);
  --color-primary: #2c2a26;
  --color-primary-on: #f1f5f9;
  --color-warning: #b45309;
  --color-info: #2f7fc4;
  --color-brand-logo: #1c1917;
  --layer-unit: #94ca66;
  --layer-component: #ff8200;
  --layer-integration: #7e22ce;
  --layer-api: #e8bd00;
  --layer-e2e: #dc2626;
  --layer-manual: #459bde;
  --layer-other: #64748b;
  --color-status-passed-chart: #3bc95d;
  --hover-bg: rgba(28, 25, 23, 0.06);
}