:root {
  --color-primary: #162839;
  --color-primary-container: #2c3e50;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #96a9be;
  --color-secondary: #446555;
  --color-secondary-container: #c6ebd6;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #4a6b5a;
  --color-background: #fbf9f8;
  --color-surface: #fbf9f8;
  --color-surface-container-low: #f6f3f2;
  --color-surface-container: #f0eded;
  --color-surface-container-lowest: #ffffff;
  --color-on-surface: #1b1c1c;
  --color-on-surface-variant: #43474c;
  --color-outline: #74777d;
  --color-outline-variant: #c4c6cd;
  --color-ghost-border: #e5e1da;
  --color-error: #ba1a1a;

  --font-headline: "Noto Serif SC", "Noto Serif", serif;
  --font-body: "Source Sans 3", sans-serif;

  --text-headline-lg: 32px;
  --text-headline-md: 24px;
  --text-headline-mobile: 26px;
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-label-lg: 16px;
  --text-label-md: 14px;

  --container-max: 1120px;
  --margin-mobile: 20px;
  --margin-desktop: 64px;
  --gutter: 24px;
  --touch-min: 48px;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --shadow-soft: 0 4px 20px -2px rgba(27, 28, 28, 0.05);
  --header-height: 64px;
  --bottom-nav-height: 80px;
}