: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(45, 61, 88);
  --color-primary-dark: rgb(32, 44, 65);
  --color-secondary: #177d7f;
  --color-secondary-bright: #249799;
  --color-secondary-dark: #0f5f61;
  --color-secondary-deep: #083f41;
  --color-accent: rgb(219, 55, 24);
  --color-accent-hover: rgb(181, 43, 18);
  --color-support: rgb(143, 211, 213);
  --color-support-soft: rgb(226, 245, 245);

  /* Neutral palette */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f5f5f5;
  --color-neutral-300: #dddddd;
  --color-neutral-400: #c7c7c7;
  --color-neutral-500: #b8b8b8;
  --color-neutral-700: #616161;
  --color-neutral-900: #222222;
  --color-neutral-950: #171717;

  /* 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-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: #0c6e70;
  --color-decoration: var(--color-support);
  --color-decoration-soft: var(--color-support-soft);
  --color-text-on-decoration: var(--color-primary-dark);
  --shadow-brand: rgba(15, 95, 97, 0.24);

  /* 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;
}