:root {
  --font-body: ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --font-display: ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";

  /* Brand palette */
  --color-primary: rgb(58, 118, 196);
  --color-primary-dark: #234b80;
  --color-secondary: #168fc3;
  --color-secondary-bright: #32a9d7;
  --color-secondary-dark: #1177a4;
  --color-secondary-deep: #0b587a;
  --color-accent: #101f78;
  --color-accent-hover: #091452;
  --color-support: #8fe7c6;
  --color-support-soft: #e3f8f1;

  /* Neutral palette */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fafbfc;
  --color-neutral-100: #f3f6f9;
  --color-neutral-300: #d9e0e8;
  --color-neutral-400: #bec9d4;
  --color-neutral-500: #9ca9b7;
  --color-neutral-700: #586574;
  --color-neutral-900: #202832;
  --color-neutral-950: #141a21;

  /* Semantic roles */
  --color-surface-page: var(--color-neutral-0);
  --color-surface-subtle: var(--color-neutral-50);
  --color-surface-muted: var(--color-neutral-100);
  --color-surface-brand: var(--color-primary);
  --color-surface-brand-hover: var(--color-primary-dark);
  --color-surface-navigation-control: var(--color-primary-dark);
  --color-surface-highlight: var(--color-accent);
  --color-surface-highlight-hover: var(--color-accent-hover);
  --color-text: var(--color-neutral-900);
  --color-text-strong: var(--color-neutral-950);
  --color-text-muted: var(--color-neutral-700);
  --color-text-on-brand: var(--color-neutral-0);
  --color-border: var(--color-neutral-300);
  --color-border-strong: var(--color-neutral-400);
  --color-control-muted: var(--color-neutral-500);
  --color-interactive: var(--color-secondary);
  --color-interactive-strong: var(--color-secondary-dark);
  --color-interactive-hover: var(--color-secondary-deep);
  --color-focus: var(--color-secondary-bright);
  --color-control-active: var(--color-interactive);
  --color-control-focus: var(--color-focus);
  --color-action-primary: var(--color-primary);
  --color-action-primary-hover: var(--color-primary-dark);
  --color-link: #116f9a;
  --color-decoration: var(--color-support);
  --color-decoration-soft: var(--color-support-soft);
  --shadow-brand: rgba(22, 143, 195, 0.22);

  /* Functional roles */
  --color-success-surface: #ecfdf3;
  --color-success-border: #a7f3d0;
  --color-success-text: #065f46;
  --color-error-surface: #fff4f4;
  --color-error-border: #fecaca;
  --color-error-text: #b91c1c;
}