/* ==========================================================================
   Design tokens "Schwanenvilla" – version 2 (ADR-0003)
   Source of truth: docs/design/DESIGN-Schwanenvilla-v2.md and the approved
   drafts in docs/design/entwuerfe/ (startseite-entwurf-2.html,
   unterkunft-entwurf-1.html, umgebung-entwurf-1.html).
   This file carries the UNION of the three draft token sets; the homepage
   values are the defaults. Page templates override individual tokens via
   body-class scoped rules in their page CSS (e.g. --fs-hero, --fs-h3).
   Do not invent values here – changes go through the design system doc.
   ========================================================================== */

:root {
  /* Colors – palette unchanged */
  --color-bg: #ffffff;
  --color-surface: #f1f0ef;
  --color-ink: #2f2e2e;
  --color-muted: #605e5e;
  --color-hairline: #cccccc;
  --color-focus: #116dff;
  --color-error: #a1271b;    /* form errors only (contact form, 2026-10-14); 6.5:1 on surface */

  /* Roles on dark bands */
  --dark-bg: var(--color-ink);
  --dark-fg: #ffffff;
  --dark-muted: #cccccc;
  --dark-line: #605e5e;

  /* Veils (gradients over photos) and fog */
  --veil-ink: rgb(47 46 46 / 0.86);
  --veil-white: rgb(255 255 255 / 0.6);
  --veil-ink-strong: rgb(47 46 46 / 0.86);
  --veil-ink-mid: rgb(47 46 46 / 0.6);
  --veil-ink-none: rgb(47 46 46 / 0);
  --veil-white-strong: rgb(255 255 255 / 0.6);
  --veil-white-mid: rgb(255 255 255 / 0.35);
  --veil-white-none: rgb(255 255 255 / 0);
  --fog: rgb(255 255 255 / 0.58);
  --fog-blur: 5px;

  /* Typography */
  --font-display: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-chip: 0.8125rem;
  --fs-lead: 1.1875rem;
  --fs-hero: clamp(2.75rem, 1.2rem + 4.6vw, 6.5rem);  /* effective homepage
     value (the draft's .hero h1 rule); subpages override to 6rem max in
     their page CSS */
  --fs-statement: clamp(2rem, 1.3rem + 2.9vw, 4rem);
  --fs-h2: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);     /* unterkunft default */
  --fs-h3-featured: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-num: clamp(3rem, 2rem + 3.4vw, 5.5rem);
  --lh-body: 1.65;

  /* 8px grid */
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px;
  --space-6: 48px; --space-8: 64px; --space-10: 80px; --space-12: 96px; --space-16: 128px;
  --band-pad: clamp(var(--space-8), 10vw, var(--space-16));
  --gutter: clamp(var(--space-3), 5vw, var(--space-8));
  --container: 1240px;

  /* Radii and lines */
  --radius-0: 0; --radius-pill: 50px; --radius-circle: 200px;
  --line: 1px solid var(--color-hairline);
  --line-dark: 1px solid var(--dark-line);

  /* Metrics */
  --header-h: 88px;
  --anchor-h: 52px;
  --cat-head-h: clamp(280px, 48vh, 540px);
  --ease-control: 0.2s ease;
  --ease-reveal: 0.4s cubic-bezier(0.3, 0.13, 0.12, 1);
}

@media (max-width: 1240px) {
  :root { --header-h: 72px; }
}