:root {
  color-scheme: light;

  /* Compatibility values: keep these resolved for inline CSS and legacy JS. */
  --bg: #fff;
  --surface: #f4f6fa;
  --card: #fff;
  --card-hov: #eef3f9;
  --border: #d7dee8;
  --faint: #ebeff5;
  --text: #16202e;
  --muted: #5b6b82;
  --dim: #aeb9c8;
  --accent: #1668e0;
  --acc-bg: rgb(29 114 255 / 8%);
  --acc-bdr: rgb(29 114 255 / 35%);
  --success: #12925a;
  --success-bg: rgb(23 168 101 / 13%);
  --warn: #b4720f;
  --warn-bg: rgb(196 123 26 / 15%);
  --danger: #c0392b;
  --danger-bg: rgb(184 48 48 / 10%);
  --text-dim: #647388;

  /* Semantic light-theme palette. */
  --color-canvas: var(--bg);
  --color-surface: var(--surface);
  --color-surface-raised: var(--card);
  --color-surface-hover: var(--card-hov);
  --color-surface-subtle: var(--faint);
  --color-border: var(--border);
  --color-text: var(--text);
  --color-text-subtle: var(--text-dim);
  --color-text-muted: var(--muted);
  --color-text-disabled: var(--dim);
  --color-accent: var(--accent);
  --color-accent-subtle: var(--acc-bg);
  --color-accent-border: var(--acc-bdr);
  --color-success: var(--success);
  --color-success-text: #0e7b49;
  --color-success-subtle: var(--success-bg);
  --color-warning: var(--warn);
  --color-warning-text: #95600d;
  --color-warning-subtle: var(--warn-bg);
  --color-danger: var(--danger);
  --color-danger-subtle: var(--danger-bg);
  --color-on-accent: #fff;
  --color-focus: var(--accent);
  --color-selection: rgb(29 114 255 / 18%);
  --color-control-background: var(--surface);
  --color-control-border: var(--border);
  --color-role-rollouts: #8b45c6;
  --color-role-pool: #8f46c7;
  --color-role-inbox: #157f74;

  /* Typography. */
  --font-ui: ui-sans-serif, system-ui, -apple-system, blinkmacsystemfont,
    "Segoe UI", sans-serif;
  --font-mo: ui-monospace, "SFMono-Regular", menlo, monaco, consolas,
    "Liberation Mono", "Courier New", monospace;
  --font-sans: var(--font-ui);
  --font-mono: var(--font-mo);
  --font-size-3xs: 9px;
  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 26px;
  --font-size-3xl: 30px;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-emphasis: 650;
  --font-weight-bold: 700;
  --line-height-tight: 1.15;
  --line-height-compact: 1.3;
  --line-height-body: 1.5;

  /* Spacing and shape. */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  --space-10: 32px;
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-pill: 999px;
  --border-width: 1px;

  /* Controls, focus, and elevation. */
  --control-height-sm: 30px;
  --control-height-md: 36px;
  --control-height-lg: 44px;
  --control-padding-inline: var(--space-5);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-offset-spacious: 3px;
  --shadow-popover: 0 12px 32px rgb(21 34 50 / 16%);
  --shadow-overlay: 0 24px 80px rgb(9 16 29 / 26%);
  --shadow-success-ring: 0 0 0 3px var(--color-success-subtle);

  /* Application layout. */
  --app-header-height: 64px;
}