:root {
  --palette-loden: #36452f;
  --palette-loden-deep: #232d1f;
  --palette-cognac: #9a4e1d;
  --palette-vachetta: #ebcfab;
  --palette-brass: #b88e3d;
  --palette-ink: #26201b;
  --palette-ink-soft: #5b534c;
  --palette-mist: #eef0ea;
  --palette-line: #d6d8cf;
  --palette-linen: #f4f2eb;
  --palette-white: #ffffff;

  --color-page-background: var(--palette-white);
  --color-tinted-background: var(--palette-mist);
  --color-text: var(--palette-ink);
  --color-text-muted: var(--palette-ink-soft);
  --color-link: var(--palette-cognac);
  --color-border: var(--palette-line);

  --color-dark-surface: var(--palette-loden);
  --color-dark-surface-deep: var(--palette-loden-deep);
  --color-text-on-dark: var(--palette-linen);
  --color-highlight-on-dark: var(--palette-vachetta);

  --color-icon: var(--palette-cognac);
  --color-card-front: var(--palette-white);
  --color-tag-surface: var(--palette-vachetta);
  --color-stitching: var(--palette-cognac);
  --color-hardware: var(--palette-brass);

  --color-button-background: var(--palette-loden);
  --color-button-background-hover: var(--palette-loden-deep);
  --color-button-text: var(--palette-white);

  --color-focus-ring: var(--palette-cognac);

  --font-family-base: "Montserrat", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Arial, sans-serif;

  --font-weight-body: 400;
  --font-weight-label: 600;
  --font-weight-heading: 700;
  --font-weight-display: 800;

  /* Größen aus der klassischen typografischen Skala
     (12 · 14 · 16 · 18 · 21 · 24 · 36 · 48 · 60 px) */
  --font-size-caption: 0.75rem;        /* 12px */
  --font-size-small: 0.875rem;         /* 14px */
  --font-size-body: 1rem;              /* 16px */
  --font-size-lead: 1.125rem;          /* 18px */
  --font-size-card-title: 1rem;        /* 16px – wächst ab Tablet auf 18px */
  --font-size-card-text: 0.8125rem;    /* 13px – Text auf schmalen Marken-Karten, ab Tablet 14px */
  --font-size-wordmark: 1.125rem;      /* 18px – wächst ab Tablet auf 21px */
  --font-size-nav: 0.8125rem;          /* 13px – Menü auf dem Handy, ab Tablet 14px */
  --font-size-section-title: 2.25rem;  /* 36px – wächst auf Desktop */
  --font-size-hero-title: 2.25rem;     /* 36px – wächst auf Tablet/Desktop */

  --line-height-body: 1.6;
  --line-height-heading: 1.1;

  --text-measure: 38rem;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2.5rem;
  --space-section: 3.5rem;

  --container-max-width: 72rem;
  --container-gutter: 1rem;
  --header-height: 4.25rem;

  --radius-card: 0.25rem;
  --radius-button: 2rem;
  --duration-quick: 0.15s;
  --duration-flip: 0.6s;
  --easing-flip: cubic-bezier(0.3, 0.7, 0.2, 1);
}

@media (min-width: 40em) {
  :root {
    --font-size-card-title: 1.125rem;  /* 18px */
    --font-size-card-text: 0.875rem;   /* 14px */
    --font-size-wordmark: 1.3125rem;   /* 21px */
    --font-size-nav: 0.875rem;         /* 14px */
    --font-size-hero-title: 3rem;      /* 48px */
    --space-section: 5rem;
    --container-gutter: 1.5rem;
  }
}

@media (min-width: 64em) {
  :root {
    --font-size-hero-title: 3.75rem;   /* 60px */
    --font-size-section-title: 3rem;   /* 48px */
    --space-section: 6rem;
  }
}