: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: #312e81;
  --color-primary-dark: #1e1b4b;
  --color-secondary: #4f46e5;
  --color-secondary-bright: #6366f1;
  --color-secondary-dark: #3730a3;
  --color-secondary-deep: #3730a3;
  --color-accent: #d4a017;
  --color-accent-hover: #b8860b;
  --color-support: #f2d675;
  --color-support-soft: #fff8db;

  /* Neutral palette */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fafbfb;
  --color-neutral-100: #f3f6f6;
  --color-neutral-300: #d9e0e1;
  --color-neutral-400: #bec9cb;
  --color-neutral-500: #9caaad;
  --color-neutral-700: #59686b;
  --color-neutral-900: #20292b;
  --color-neutral-950: #131a1c;

  /* 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: #4338ca;
  --color-decoration: var(--color-support);
  --color-decoration-soft: var(--color-support-soft);
  --color-text-on-decoration: var(--color-primary-dark);
  --shadow-brand: rgba(49, 46, 129, 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;
}