:root {
  /* Cobalt indicator dots, progress fills, icon fills, tag backgrounds. */
  --accent-brand: #88B0CD;
  /* X icons, negative indicators. */
  --accent-error: #BE123C;
  /* Information icons. Aliases brand cobalt. */
  --accent-info: #3A73A0;
  /* Check icons, progress success, positive metric indicators. */
  --accent-success: #22C55E;
  /* Caution icons, amber indicators. */
  --accent-warning: #F59E0B;
  --background-action-destructive: #E11D48;
  --background-action-destructive-hover: #BE123C;
  --background-action-destructive-pressed: #9F1239;
  --background-action-ghost: #F0F6FA;
  --background-action-ghost-hover: #D9ECF7;
  --background-action-ghost-pressed: #B8D8ED;
  /* Primary CTA button. Pair with foreground/on-action. */
  --background-action-primary: #3A73A0;
  /* CTA button hover state. */
  --background-action-primary-hover: #2D5C82;
  /* CTA button pressed/active state. */
  --background-action-primary-pressed: #224868;
  --background-action-secondary: #121212;
  --background-action-secondary-hover: #2E2E2E;
  --background-action-secondary-pressed: #000000;
  /* Brand cobalt surface — branded callouts, highlights. */
  --background-brand: #88B0CD;
  /* Subtle cobalt tint — tags, selected states, soft brand accents. */
  --background-brand-subtle: #F0F6FA;
  /* Card/container surfaces — panels holding content. Pair with border/default. */
  --background-card: #FFFFFF;
  --background-code: #1A1A1A;
  --background-control: #121212;
  --background-control-hover: #2E2E2E;
  --background-control-pressed: #000000;
  /* Disabled state — inactive buttons and inputs. Not for interactive elements. */
  --background-disabled: #E8E8E8;
  /* Elevated surface — popovers, tooltips, sticky headers. */
  --background-elevated: #FFFFFF;
  /* Error background — validation errors, destructive actions. */
  --background-error: #FFF1F2;
  --background-hover: #F0EFEC;
  /* Info background — neutral informational banners. Aliases brand. */
  --background-info: #F0F6FA;
  /* Form inputs, selects, textareas. */
  --background-input: #FFFFFF;
  /* Inverted surface — dark chip/badge on light mode. */
  --background-inverse: #10243A;
  /* Modal scrim — darkens page to focus attention on elevated content. */
  --background-overlay: #000000;
  /* Page background — Off White outermost surface. */
  --background-page: #FAF9F6;
  --background-selected: #E8E8E8;
  /* Success background — confirmation banners, success toasts. */
  --background-success: #F0FDF4;
  /* Warning background — caution banners, advisory states. */
  --background-warning: #FFFBEB;
  --border-action: #081527;
  --border-action-secondary: #000000;
  --border-action-secondary-hover: #000000;
  --border-action-secondary-pressed: #ABABAB;
  /* Brand-coloured border — cobalt edges for callouts, selected tags. */
  --border-brand: #88B0CD;
  /* Standard card edges, input borders, content dividers. */
  --border-default: #E8E8E8;
  --border-disabled: #D4D4D4;
  --border-divider: #E8E8E8;
  /* Error state border — error banners, invalid inputs. */
  --border-error: #BE123C;
  /* Keyboard focus ring — 2px outline. Always visible for accessibility. */
  --border-focus: #3A73A0;
  --border-focus-inner: #FAF9F6;
  --border-ghost: #5C91B5;
  /* Info state border — informational banners. */
  --border-info: #3A73A0;
  /* Inverted border — card edges on dark/inverse surfaces. */
  --border-inverse: #081527;
  /* Prominent edge — selected/active states, strong dividers. */
  --border-strong: #ABABAB;
  /* Barely-there dividers — section separators, list rules. */
  --border-subtle: #F0EFEC;
  /* Success state border — success banners, valid inputs. */
  --border-success: #22C55E;
  /* Warning state border — caution banners. */
  --border-warning: #F59E0B;
  --icon-accent: #3A73A0;
  --icon-disabled: #ABABAB;
  --icon-error: #BE123C;
  --icon-inverse: #FAF9F6;
  --icon-primary: #121212;
  --icon-secondary: #666666;
  /* Brand cobalt text — links, active nav items, cobalt-accented labels. */
  --text-brand: #3A73A0;
  --text-code: #F59E0B;
  /* Disabled text and icons. Never on interactive elements. */
  --text-disabled: #ABABAB;
  /* Error text and icons — validation messages. */
  --text-error: #BE123C;
  /* Info text and icons. Aliases brand cobalt. */
  --text-info: #3A73A0;
  /* Text on inverted/dark surfaces in light mode. */
  --text-inverse: #FAF9F6;
  /* Brand cobalt text — links, active nav items, cobalt-accented labels and accents. */
  --text-link: #3A73A0;
  /* 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: #224868;
  /* 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: #224868;
  /* Text/icons on background/action buttons — white on cobalt/500. */
  --text-on-action: #FFFFFF;
  /* 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: #FFFFFF;
  /* Body copy and long-form reading text. Highest contrast. Pairs with background/page. */
  --text-primary: #121212;
  --text-required: #E11D48;
  /* Timestamps, project tags, secondary labels. */
  --text-secondary: #666666;
  /* Success text and icons — confirmation messages. */
  --text-success: #16A34A;
  /* Placeholder, helper text, captions. Least prominent foreground. */
  --text-tertiary: #737373;
  /* Warning text and icons — caution messages. */
  --text-warning: #B45309;
}