:root {
  color-scheme: light;

  /* Compatibility values: keep these resolved for inline CSS and legacy JS. */
  --bg: #fff;
  --surface: #f7f7f7;
  --card: #fff;
  --card-hov: #f2f2f2;
  --border: #dedede;
  --faint: #eee;
  --text: #171717;
  --muted: #686868;
  --dim: #b5b5b5;
  --accent: #171717;
  --acc-bg: rgb(23 23 23 / 5%);
  --acc-bdr: rgb(23 23 23 / 24%);
  --success: #505050;
  --success-bg: rgb(23 23 23 / 6%);
  --warn: #686868;
  --warn-bg: rgb(23 23 23 / 6%);
  --danger: #c0392b;
  --danger-bg: rgb(184 48 48 / 10%);
  --text-dim: #737373;

  /* 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: #505050;
  --color-success-subtle: var(--success-bg);
  --color-warning: var(--warn);
  --color-warning-text: #686868;
  --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(23 23 23 / 14%);
  --color-control-background: var(--surface);
  --color-control-border: var(--border);
  --color-primary-control-background: var(--card);
  --color-primary-control-border: var(--border);
  --color-primary-control-hover-border: var(--acc-bdr);
  --color-primary-control-text: var(--text);
  --color-primary-control-hover: var(--surface);
  --color-role-rollouts: var(--text-dim);
  --color-role-pool: var(--text-dim);
  --color-role-inbox: var(--text-dim);

  /* 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: var(--r-sm);
  --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);
  --shadow-primary-control: 0 1px 2px rgb(23 23 23 / 6%);
  --shadow-primary-control-hover: 0 2px 5px rgb(23 23 23 / 9%);

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