:root {
  color-scheme: light;
  --neutral-dark: #141414;
  --neutral-light: #fff;
  --surface: var(--neutral-light);
  --ink: var(--neutral-dark);
  --ink-muted: color-mix(in srgb, var(--ink) 66%, transparent);
  --ink-quiet-text: var(--ink-muted);
  --ink-subtle: color-mix(in srgb, var(--ink) 50%, transparent);
  --surface-subtle: color-mix(in srgb, var(--ink) 3%, var(--surface));
  --line: color-mix(in srgb, var(--ink) 10%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 25%, transparent);
  --interaction-hover: color-mix(in srgb, var(--ink) 5%, transparent);
  --interaction-pressed: color-mix(in srgb, var(--ink) 15%, transparent);
  --focus-color: var(--ink);
  --focus-width: 2px;
  --focus-offset: 2px;

  /* Figma utility colors retain the same roots in both color modes. */
  --state-live-ink: rgb(7.032468% 64.640927% 22.394726%);
  --state-edit-ink: rgb(22.844088% 40.835372% 94.809192%);
  --state-attention-ink: rgb(90.807164% 15.312454% 20.345436%);
  --state-disabled-ink: #858585;
  /* Text roles improve contrast; signal/glow roots preserve Figma colors. */
  --state-live-ink-base: var(--ink-muted);
  --state-live-text: color-mix(in srgb, var(--state-live-ink) 75%, black);
  --state-edit-text: color-mix(in srgb, var(--state-edit-ink) 90%, black);
  --state-attention-text: color-mix(in srgb, var(--state-attention-ink) 75%, black);
  --state-disabled-text: color-mix(in srgb, var(--state-disabled-ink) 75%, black);
  --state-live-surface: color-mix(in srgb, var(--state-live-ink) 5%, transparent);
  --state-edit-surface: color-mix(in srgb, var(--state-edit-ink) 5%, transparent);
  --interaction-edit-hover: color-mix(in srgb, var(--state-edit-ink) 2%, transparent);
  --state-attention-surface: color-mix(in srgb, var(--state-attention-ink) 5%, transparent);
  --state-disabled-surface: color-mix(in srgb, var(--state-disabled-ink) 5%, transparent);
  --state-live-glow: color-mix(in srgb, var(--state-live-ink) 50%, transparent);
  --state-edit-glow: color-mix(in srgb, var(--state-edit-ink) 50%, transparent);
  --state-attention-glow: color-mix(in srgb, var(--state-attention-ink) 50%, transparent);
  --state-disabled-glow: color-mix(in srgb, var(--state-disabled-ink) 50%, transparent);

  --font-ui: ui-rounded, system-ui, sans-serif;
  --font-content-family: system-ui, sans-serif;
  --font-overview-family: system-ui, sans-serif;
  --font-domain-family: system-ui, sans-serif;
  --font-optical-sizing: auto;
  --font-tracking: 0em;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-strong: 600;
  --font-optical-size: 18;
  --font-body-size: .9375rem;
  --font-body-line: 1.5;
  --font-meta-size: .8125rem;
  --font-meta-line: 1.4;
  --font-title-size: 1rem;
  --font-title-line: 1.5;
  --font-row-size: .9375rem;
  --font-row-line: 1.285714;
  --font-status-size: .8125rem;
  --font-status-line: 1.285714;
  --font-summary-size: 1rem;
  --font-summary-line: 1.25;
  --font-domain-size: 3rem;
  --font-domain-line: 1.2;
  /* Keep semantic weight in font-weight; role axes tune family-specific shape. */
  --font-body-axes: normal;
  --font-content-axes: 'wdth' 104;
  --font-title-axes: 'wdth' 105, 'GRAD' 450;
  --font-row-axes: 'wdth' 103, 'GRAD' 425;
  --font-status-axes: 'GRAD' 450;
  --font-summary-axes: var(--font-status-axes);
  --font-domain-axes: 'wdth' 115, 'GRAD' 475, 'opsz' 28;

  --gap-text: .25rem;
  --gap-inline: .5rem;
  --gap-stack: .75rem;
  --gap-group: 1rem;
  --gap-section: 1.5rem;
  --gap-region: 2rem;
  --inset-control-inline: .75rem;
  --inset-control-block: .375rem;
  --inset-row-inline: 1rem;
  --inset-row-block: .75rem;
  --inset-container: 1rem;
  --inset-canvas: 1.5rem;
  --radius-tight: .25rem;
  --radius-default: .5rem;
  --radius-loose: .75rem;
  --radius-round: 9999px;
  --stroke-width: 1px;
  --control-size: 2.25rem;
  --control-small-size: 2rem;
  --target-size: 2.75rem;
  --icon-size: 1rem;
  --measure-reading: 40rem;
  --measure-content: 60rem;
  --shadow-near: 0 1px 4px color-mix(in srgb, var(--neutral-dark) 10%, transparent);
  --shadow-floating: 0 8px 24px -4px color-mix(in srgb, var(--neutral-dark) 15%, transparent);

  --motion-feedback: 100ms;
  --motion-change: 160ms;
  --motion-reveal: 300ms;
  --motion-press: 150ms;
  --motion-title-press: 50ms;
  --motion-easing: cubic-bezier(.2, 0, 0, 1);
  --motion-reveal-easing: ease-out;
  --motion-title-easing: cubic-bezier(.175, .885, .32, 1.275);
}

/* Sans Flex retains its original family-specific comparison settings. */
:root[data-font-family='sans-flex'] {
  --font-ui: 'Google Sans Flex', system-ui, sans-serif;
  --font-content-family: 'Google Sans Flex', system-ui, sans-serif;
  --font-overview-family: 'Google Sans Flex', system-ui, sans-serif;
  --font-domain-family: 'Google Sans Flex', system-ui, sans-serif;
  --font-optical-sizing: none;
  --font-body-axes: 'opsz' 18, 'GRAD' 0, 'ROND' 70, 'wdth' 100, 'slnt' 0;
  --font-content-axes: 'opsz' 18, 'GRAD' 0, 'ROND' 0, 'wdth' 100, 'slnt' 0;
  --font-title-axes: 'opsz' 18, 'GRAD' 0, 'ROND' 0, 'wdth' 100, 'slnt' 0;
  --font-row-axes: var(--font-title-axes);
  --font-status-axes: 'opsz' 18, 'GRAD' 0, 'ROND' 70, 'wdth' 100, 'slnt' 0;
  --font-summary-axes: var(--font-status-axes);
  --font-domain-axes: 'opsz' 18, 'GRAD' 31, 'ROND' 0, 'wdth' 100, 'slnt' 0;
}

[data-theme='dark'] {
  color-scheme: dark;
  --surface: var(--neutral-dark);
  --ink: var(--neutral-light);
  --state-live-text: var(--state-live-ink);
  --state-edit-text: color-mix(in srgb, var(--state-edit-ink) 80%, white);
  --state-attention-text: color-mix(in srgb, var(--state-attention-ink) 80%, white);
  --state-disabled-text: var(--state-disabled-ink);
}

[data-theme='light'] {
  color-scheme: light;
  --surface: var(--neutral-light);
  --ink: var(--neutral-dark);
  --state-live-text: color-mix(in srgb, var(--state-live-ink) 75%, black);
  --state-edit-text: color-mix(in srgb, var(--state-edit-ink) 90%, black);
  --state-attention-text: color-mix(in srgb, var(--state-attention-ink) 75%, black);
  --state-disabled-text: color-mix(in srgb, var(--state-disabled-ink) 75%, black);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --surface: var(--neutral-dark);
    --ink: var(--neutral-light);
    --state-live-text: var(--state-live-ink);
    --state-edit-text: color-mix(in srgb, var(--state-edit-ink) 80%, white);
    --state-attention-text: color-mix(in srgb, var(--state-attention-ink) 80%, white);
    --state-disabled-text: var(--state-disabled-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-feedback: 0ms;
    --motion-change: 0ms;
    --motion-reveal: 0ms;
    --motion-press: 0ms;
    --motion-title-press: 0ms;
  }
}

[data-motion='reduced'] {
  --motion-feedback: 0ms;
  --motion-change: 0ms;
  --motion-reveal: 0ms;
  --motion-press: 0ms;
  --motion-title-press: 0ms;
}