@font-face {
  font-family: "Geist";
  src: url("/static/web/fonts/Geist-Variable.woff2") format("woff2-variations"),
       url("/static/web/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --surface: #fdf8f8;
  --surface-bright: #fdf8f8;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f7f3f2;
  --surface-container: #f1edec;
  --surface-container-high: #ebe7e7;
  --surface-container-highest: #e5e2e1;

  --on-surface: #1c1b1b;
  --on-surface-variant: #46474a;
  --inverse-surface: #313030;
  --inverse-on-surface: #f4f0ef;

  --primary: #000000;
  --on-primary: #ffffff;
  --primary-container: #1b1b1c;

  --secondary-container: #f7d7e9;
  --on-secondary-container: #745b6a;
  --accent-highlight: #ffdef0;

  --outline: #76777b;
  --outline-variant: #c7c6ca;

  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;

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

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  --shadow-soft: 0 1px 2px rgba(28, 27, 27, 0.04),
                 0 4px 12px rgba(28, 27, 27, 0.04);
  --shadow-pop: 0 8px 24px rgba(28, 27, 27, 0.12);
  --shadow-lift: 0 14px 40px rgba(28, 27, 27, 0.16);

  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container-max: 1120px;
  --gutter: 1.5rem;
}

@media (min-width: 768px) {
  :root { --gutter: 2rem; }
}