:root {
  --color-brand-navy: #102a3a;
  --color-brand-teal: #168f92;
  --color-brand-sand: #e8dcc7;
  --color-brand-coral: #e46f51;
  --color-brand-yellow: #e8dcc7;
  --color-brand-yellow-soft: #f8f4ec;
  --color-brand-white: #ffffff;
  --color-brand-cream: #f8f4ec;
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;
}

:root {
  color-scheme: light;

  --color-page: var(--color-brand-cream);
  --color-surface: var(--color-brand-white);
  --color-surface-muted: var(--color-brand-sand);
  --color-text: var(--color-brand-navy);
  --color-text-muted: #53626b;
  --color-accent: #0b666a;
  --color-accent-strong: #0b666a;
  --color-action: #0b666a;
  --color-border: #c9bfaf;
  --color-border-strong: #687b84;
  --color-focus: #0b666a;
  --color-success: #256247;
  --color-warning: #8a4b14;
  --color-danger: #9e2f2f;

  --font-body: var(--font-sans);
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: clamp(1.35rem, 2vw, 1.6rem);
  --font-size-heading: clamp(2.5rem, 8vw, 5.75rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --radius-sm: 0.4rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;
  --shadow-soft: 0 1.25rem 3.5rem rgb(10 38 53 / 10%);
  --shadow-raised: 0 0.75rem 2rem rgb(10 38 53 / 15%);

  --page-max-width: 76rem;
  --content-max-width: 44rem;
  --touch-target: 2.75rem;
  --transition-fast: 160ms ease;
  --transition-content: 300ms ease;
  --z-header: 20;
  --z-dialog: 40;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}