:root {
  /* Approved light palette. Native controls also stay light under dark OS
     preference; dark branches remain equal until a dark palette is designed.
     Paired foregrounds belong on their named surface, not arbitrary fills.
     Equal values do not make distinct roles interchangeable. */
  color-scheme: only light;

  /* Page, contained content, floating content, and subdued content. */
  --color-background: light-dark(var(--white), var(--white));
  --color-foreground: light-dark(var(--slate-800), var(--slate-800));
  --color-surface: light-dark(var(--white), var(--white));
  --color-surface-foreground: var(--color-foreground);
  --color-popover: var(--color-surface);
  --color-popover-foreground: var(--color-foreground);
  --color-muted: light-dark(var(--slate-50), var(--slate-50));
  --color-muted-foreground: light-dark(var(--slate-600), var(--slate-600));

  /* Content grouping and speaker/person identity are not selection states. */
  --color-content-tinted: light-dark(var(--blue-100), var(--blue-100));
  --color-content-tinted-foreground: light-dark(var(--slate-800), var(--slate-800));
  --color-identity-surface: light-dark(var(--blue-100), var(--blue-100));
  --color-identity-foreground: light-dark(var(--slate-800), var(--slate-800));

  /* Actions stay in their hue family; the primary press deepens the hover.
     Secondary and destructive presses retain their hover fill and add offset. */
  --color-primary: light-dark(var(--blue-700), var(--blue-700));
  --color-primary-foreground: light-dark(var(--white), var(--white));
  --color-primary-hover: light-dark(var(--blue-800), var(--blue-800));
  --color-primary-hover-foreground: var(--color-primary-foreground);
  --color-primary-pressed: light-dark(var(--blue-900), var(--blue-900));
  --color-primary-pressed-foreground: var(--color-primary-hover-foreground);
  --color-secondary: light-dark(var(--blue-100), var(--blue-100));
  --color-secondary-foreground: light-dark(var(--blue-700), var(--blue-700));
  --color-secondary-hover: light-dark(var(--blue-200), var(--blue-200));
  --color-secondary-hover-foreground: var(--color-secondary-foreground);
  --color-secondary-pressed: var(--color-secondary-hover);
  --color-secondary-pressed-foreground: var(--color-secondary-hover-foreground);
  --color-destructive: light-dark(var(--red-700), var(--red-700));
  --color-destructive-foreground: light-dark(var(--white), var(--white));
  /* Destructive outline controls fill on hover; solid treatments keep red. */
  --color-destructive-hover: var(--color-destructive);
  --color-destructive-hover-foreground: var(--color-destructive-foreground);
  --color-destructive-pressed: var(--color-destructive-hover);
  --color-destructive-pressed-foreground: var(--color-destructive-hover-foreground);

  /* Accent is a transient interactive highlight surface, paired with its
     foreground. Selection is a separate persistent state. */
  --color-accent: light-dark(var(--blue-100), var(--blue-100));
  --color-accent-foreground: light-dark(var(--blue-700), var(--blue-700));
  --color-selected: light-dark(var(--blue-100), var(--blue-100));
  --color-selected-foreground: light-dark(var(--blue-700), var(--blue-700));
  --color-selected-hover: var(--color-selected);
  --color-selected-hover-foreground: var(--color-selected-foreground);
  --color-selected-strong: light-dark(var(--blue-700), var(--blue-700));
  --color-selected-strong-foreground: light-dark(var(--white), var(--white));
  /* Quiet interactive hover, independent of muted content and blue accent. */
  --color-neutral-hover: light-dark(var(--slate-50), var(--slate-50));
  --color-link: light-dark(var(--blue-700), var(--blue-700));
  --color-link-hover: var(--color-link);

  /* Strong boundaries identify controls; quiet borders separate content.
     Disabled controls use explicit neutral colours, never whole-control fading. */
  --color-border: light-dark(var(--slate-200), var(--slate-200));
  --color-border-strong: light-dark(var(--slate-500), var(--slate-500));
  --color-input: var(--color-surface);
  --color-input-foreground: var(--color-foreground);
  --color-input-border: var(--color-border-strong);
  --color-placeholder: var(--color-muted-foreground);
  --color-focus-ring: light-dark(var(--blue-700), var(--blue-700));
  --color-disabled: var(--color-muted);
  --color-disabled-foreground: var(--color-muted-foreground);
  --color-disabled-border: var(--color-border);

  /* Feedback: solid fill + on-fill foreground, quiet tinted surface + readable
     text, and boundary. Error is an outcome, not a destructive action.
     Warning text is darker than its solid fill to maintain text contrast. */
  --color-success: light-dark(var(--green-700), var(--green-700));
  --color-success-foreground: light-dark(var(--white), var(--white));
  --color-success-subtle: light-dark(var(--green-50), var(--green-50));
  --color-success-text: var(--color-success);
  --color-success-border: var(--color-success);
  --color-warning: light-dark(var(--orange-700), var(--orange-700));
  --color-warning-foreground: light-dark(var(--white), var(--white));
  --color-warning-subtle: light-dark(var(--orange-50), var(--orange-50));
  --color-warning-text: light-dark(var(--orange-800), var(--orange-800));
  --color-warning-border: var(--color-warning);
  --color-error: light-dark(var(--red-700), var(--red-700));
  --color-error-foreground: light-dark(var(--white), var(--white));
  --color-error-subtle: light-dark(var(--red-50), var(--red-50));
  --color-error-text: var(--color-error);
  --color-error-border: var(--color-error);
  --color-info: light-dark(var(--blue-700), var(--blue-700));
  --color-info-foreground: light-dark(var(--white), var(--white));
  --color-info-subtle: light-dark(var(--blue-50), var(--blue-50));
  --color-info-text: var(--color-info);
  --color-info-border: var(--color-info);

  /* Ongoing activity is not an action or a completed outcome. */
  --color-activity: light-dark(var(--blue-700), var(--blue-700));
  --color-activity-foreground: light-dark(var(--white), var(--white));

  /* Progress measures completion; a range represents a chosen extent.
     Keep these separate even though their initial palettes match. */
  --color-progress-track: light-dark(var(--slate-200), var(--slate-200));
  --color-progress-fill: light-dark(var(--blue-700), var(--blue-700));
  --color-range-track: light-dark(var(--slate-200), var(--slate-200));
  --color-range-fill: light-dark(var(--blue-700), var(--blue-700));

  /* Categorical data: series colours carry no success/error/action meaning. */
  --color-chart-1: light-dark(var(--blue-700), var(--blue-700));
  --color-chart-2: light-dark(var(--green-700), var(--green-700));
  --color-chart-3: light-dark(var(--purple-700), var(--purple-700));
  --color-chart-4: light-dark(var(--orange-700), var(--orange-700));
  --color-chart-5: light-dark(var(--teal-700), var(--teal-700));
  --color-chart-6: light-dark(var(--red-700), var(--red-700));

  /* Unpainted surfaces and boundaries reveal their surrounding composition. */
  --color-clear: light-dark(var(--transparent), var(--transparent));

  /* Shadows indicate elevation. Only modal surfaces use the darker scrim. */
  --color-shadow: light-dark(var(--slate-alpha-12), var(--slate-alpha-12));
  --color-shadow-anchored: light-dark(var(--black-alpha-14), var(--black-alpha-14));
  --color-scrim: light-dark(var(--black-alpha-45), var(--black-alpha-45));

  --control-target-size: var(--size-44);
  --control-radius: var(--radius-8);
  --control-border-width: var(--border-1);
  --focus-width: var(--border-2);
  --focus-offset: var(--space-1);
  --font-interface: var(--font-sans);

  /* Headings establish document hierarchy, independent of HTML heading level. */
  --font-type-heading-large: var(--font-sans-30-42-semibold);
  --font-type-heading: var(--font-sans-24-30-semibold);
  --font-type-heading-small: var(--font-sans-18-27-semibold);

  /* Titles name discrete items; body styles support sustained reading. */
  --font-type-title: var(--font-sans-14-20-medium);
  --font-type-body-large: var(--font-sans-16-24-regular);
  --font-type-body: var(--font-sans-14-21-regular);
  --font-type-body-small: var(--font-sans-13-20-regular);

  /* Labels name actions and choices; strong variants add emphasis. */
  --font-type-label: var(--font-sans-14-20-regular);
  --font-type-label-strong: var(--font-sans-14-20-semibold);
  --font-type-label-small: var(--font-sans-13-20-regular);
  --font-type-label-small-strong: var(--font-sans-13-20-semibold);
  /* Dense structural labels, not secondary metadata. */
  --font-type-label-compact: var(--font-sans-12-18-medium);
  --font-type-label-compact-strong: var(--font-sans-12-18-semibold);

  /* Captions supply secondary context; eyebrows categorize content. */
  --font-type-caption: var(--font-sans-12-18-regular);
  --font-type-caption-small: var(--font-sans-11-17-regular);
  --font-type-eyebrow: var(--font-sans-11-17-medium);

  /* Values emphasize a result rather than establish document hierarchy. */
  --font-type-value: var(--font-sans-18-27-semibold);
  --font-type-value-large: var(--font-sans-24-30-semibold);
  --font-type-code: var(--font-mono-12-19-regular);
}