@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  --color-canvas: #f3eee6;
  --color-surface: #fbf8f3;
  --color-surface-muted: #e3d7c9;
  --color-text: #2a201b;
  --color-text-muted: #6d5b50;
  --color-line: #c8b39e;
  --color-brand: #6b4632;
  --color-brand-strong: #4c3024;
  --color-brand-soft: #b98255;
  --color-on-brand: #fff8f0;
  --color-accent: #3f5443;
  --color-accent-strong: #2f4032;
  --color-on-accent: #fff8f0;
  --color-critical: #9a3f36;
  --color-on-critical: #fff8f0;

  --font-display: "Manrope", "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-display: 5rem;
  --font-size-h1: 3.5rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 1.5rem;
  --font-size-body-lg: 1.25rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-caption: 0.75rem;
  --line-height-display: 1;
  --line-height-heading: 1.12;
  --line-height-body: 1.55;
  --line-height-compact: 1.3;
  --letter-spacing-display: 0;
  --letter-spacing-default: 0;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-detail: 2px;
  --radius-control: 4px;
  --radius-media: 8px;

  --shadow-raised: 0 12px 30px rgb(76 48 36 / 16%);
  --shadow-focus: 0 0 0 3px rgb(63 84 67 / 34%);

  --container-max: 78rem;
  --gutter: 1.5rem;
  --control-height: 3rem;
  --touch-target: 2.75rem;
  --border-thin: 1px;
  --border-strong: 2px;

  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 520ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-canvas: #211914;
    --color-surface: #2b211b;
    --color-surface-muted: #382a22;
    --color-text: #f3eee6;
    --color-text-muted: #cdbeaf;
    --color-line: #5b4538;
    --color-brand: #b98255;
    --color-brand-strong: #d19a6d;
    --color-brand-soft: #8d5d3f;
    --color-on-brand: #211914;
    --color-accent: #9db39e;
    --color-accent-strong: #b7c8b6;
    --color-on-accent: #192219;
    --color-critical: #e4897d;
    --color-on-critical: #251614;
    --shadow-raised: 0 14px 34px rgb(0 0 0 / 28%);
    --shadow-focus: 0 0 0 3px rgb(157 179 158 / 38%);
  }
}

@media (max-width: 47.99rem) {
  :root {
    --font-size-display: 3rem;
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.375rem;
    --font-size-body-lg: 1.125rem;
    --gutter: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}