[data-theme='dark'] {
  /* Cobalt indicators, progress fills in dark. */
  --accent-brand: #88B0CD;
  /* Error indicators in dark. */
  --accent-error: #F43F5E;
  /* Info indicators in dark. Aliases cobalt. */
  --accent-info: #3A73A0;
  /* Success indicators in dark. */
  --accent-success: #22C55E;
  /* Warning indicators in dark. */
  --accent-warning: #F59E0B;
  --background-action-destructive: #FDA4AF;
  --background-action-destructive-hover: #FECDD3;
  --background-action-destructive-pressed: #FB7185;
  --background-action-ghost: #10243A;
  --background-action-ghost-hover: #193651;
  --background-action-ghost-pressed: #081527;
  /* Primary CTA button — light cobalt on dark. Pair with foreground/on-action. */
  --background-action-primary: #88B0CD;
  /* CTA button hover — lighter cobalt. */
  --background-action-primary-hover: #B8D8ED;
  /* CTA button pressed — slightly deeper cobalt. */
  --background-action-primary-pressed: #5C91B5;
  --background-action-secondary: #121212;
  --background-action-secondary-hover: #000000;
  --background-action-secondary-pressed: #000000;
  /* Brand cobalt surface — deeper cobalt for dark branded sections. */
  --background-brand: #2D5C82;
  /* Subtle brand surface — dark card with blue cast for soft brand accents. */
  --background-brand-subtle: #10243A;
  /* Card surfaces — slightly lifted from page. Pair with border/default. */
  --background-card: #10243A;
  --background-code: #1A1A1A;
  --background-control: #FAF9F6;
  --background-control-hover: #F0EFEC;
  --background-control-pressed: #E8E8E8;
  /* Disabled state — inactive elements in dark mode. */
  --background-disabled: #10243A;
  /* Elevated surface — dropdowns, popovers, sticky headers. */
  --background-elevated: #10243A;
  /* Error background — dark red tint. */
  --background-error: #4C0519;
  --background-hover: #2E2E2E;
  /* Info background — dark cobalt tint. Aliases brand. */
  --background-info: #081527;
  /* Form inputs — same as card in dark mode. */
  --background-input: #10243A;
  /* Inverted surface — light chip/badge on dark. */
  --background-inverse: #FAF9F6;
  /* Modal scrim — deep black at high opacity. */
  --background-overlay: #000000;
  /* Page background — near-black blue-grey. Reduces eye strain in low light. */
  --background-page: #081527;
  --background-selected: #4A4A4A;
  /* Success background — dark green tint. */
  --background-success: #052E16;
  /* Warning background — dark amber tint. */
  --background-warning: #451A03;
  --border-action: #224868;
  --border-action-secondary: #2E2E2E;
  --border-action-secondary-hover: #2E2E2E;
  --border-action-secondary-pressed: #2E2E2E;
  /* Brand cobalt border in dark. */
  --border-brand: #5C91B5;
  /* Standard card edges and dividers — blue-grey tinted. */
  --border-default: #193651;
  --border-disabled: #4A4A4A;
  --border-divider: #2E2E2E;
  /* Error border in dark. */
  --border-error: #E11D48;
  /* Keyboard focus ring — cobalt/300 in dark. Always visible. */
  --border-focus: #88B0CD;
  --border-focus-inner: #FAF9F6;
  --border-ghost: #88B0CD;
  /* Info border in dark. */
  --border-info: #5C91B5;
  /* Inverted border — card edges on dark/inverse surfaces. */
  --border-inverse: #F0F6FA;
  /* Prominent edge — selected states, strong dividers in dark. */
  --border-strong: #888888;
  /* Barely-there dividers — section separators in dark. */
  --border-subtle: #10243A;
  /* Success border in dark. */
  --border-success: #16A34A;
  /* Warning border in dark. */
  --border-warning: #D97706;
  --icon-accent: #88B0CD;
  --icon-disabled: #666666;
  --icon-error: #FB7185;
  --icon-inverse: #121212;
  --icon-primary: #FAF9F6;
  --icon-secondary: #ABABAB;
  /* Brand cobalt text in dark — links, active nav items. */
  --text-brand: #88B0CD;
  --text-code: #F59E0B;
  /* Disabled text and icons in dark mode. */
  --text-disabled: #666666;
  /* Error text and icons in dark mode. */
  --text-error: #FB7185;
  /* Info text and icons in dark mode. Aliases brand cobalt. */
  --text-info: #88B0CD;
  /* Dark text on inverted light surfaces. */
  --text-inverse: #121212;
  /* Brand cobalt text — links, active nav items, cobalt-accented labels and accents. */
  --text-link: #88B0CD;
  /* Link colour on hover. One step darker than text/brand in light mode, one step lighter in dark mode (matches the action-button hover direction convention). */
  --text-link-hover: #B8D8ED;
  /* Link colour after the user has visited it. One step further than hover in the same direction (darker in light mode, lighter in dark mode). */
  --text-link-visited: #D9ECF7;
  /* Text/icons on background/action — off-black on cobalt/300 (8.5:1 contrast). */
  --text-on-action: #121212;
  /* Off-white text for the solid-fill Secondary button — static across themes since background/action/secondary does not change between Light and Dark. */
  --text-on-action-secondary: #FAF9F6;
  --text-on-danger: #121212;
  /* Body copy in dark mode — Off White. Maximum contrast against dark surfaces. */
  --text-primary: #FAF9F6;
  --text-required: #FB7185;
  /* Secondary text — muted but readable. Timestamps, tags, metadata. */
  --text-secondary: #ABABAB;
  /* Success text and icons in dark mode. */
  --text-success: #4ADE80;
  /* Placeholder text, helper text, captions. Least prominent. */
  --text-tertiary: #888888;
  /* Warning text and icons in dark mode. */
  --text-warning: #FCD34D;
}