/*
  LEWINA Design-Tokens — einzige Quelle fuer Farben, Typografie, Abstaende.

  MARKEN-ERWEITERBARKEIT (siehe auch /BRANDS.md im Hauptprojekt fuer die
  vollstaendige Anleitung): components.css referenziert NIEMALS eine
  markenspezifische Variable (--brand-therm-*, --brand-holzbau-*) direkt,
  sondern ausschliesslich die generischen --brand-accent / --brand-accent-dark
  Variablen weiter unten. Auf dieser One-Page-Variante werden beide Marken
  gleichzeitig gezeigt, daher werden die generischen Variablen nicht auf
  :root neu belegt (wie es therm.css/holzbau.css auf den Einzelseiten tun),
  sondern abschnittsweise ueber .brand-scope--therm / .brand-scope--holzbau
  in onepage.css.

  DARK MODE: Alle Farben sind hier zusaetzlich als semantische Tokens
  (--color-bg, --color-text, --color-surface, ...) verfuegbar. base.css,
  layout.css und components.css verwenden ausschliesslich diese semantischen
  Tokens fuer Text/Hintergrund, nie die rohen --color-graphit/--color-kalkweiss
  direkt (Ausnahme: bewusst themen-feste Flaechen wie Footer/.section--dark,
  die in beiden Modi gleich aussehen sollen). Der [data-theme="dark"]-Block
  am Ende ueberschreibt nur die semantischen Tokens.
*/

:root {
  /* Neutrale Basisfarben — Quelle: finale Logo-SVGs (Graphit) + Farbkonzept (Flaechen) */
  --color-graphit: #191A18;
  --color-kalkweiss: #F5F1E9;
  --color-leinen: #E7DED0;
  --color-naturstein: #C9B8A2;
  --color-white: #FFFFFF;

  /* Marken-Akzentfarben — aus den echten Logo-SVGs ausgelesen (nicht die frueheren Konzeptwerte) */
  --brand-therm-accent: #B54B22;
  --brand-therm-accent-dark: #943E1C;
  --brand-holzbau-accent: #526F63;
  --brand-holzbau-accent-dark: #435B51;

  /* Generische Marken-Variablen: default monochrom (Dach-Bereiche der Seite),
     werden innerhalb von .brand-scope--therm / .brand-scope--holzbau ueberschrieben. */
  --brand-accent: var(--color-graphit);
  --brand-accent-dark: var(--color-graphit);

  /* Kontrastregel (WCAG AA geprueft):
     Kupfer/Salbei als TEXTFARBE nur auf Kalkweiss/Weiss (bestehen AA, ~4,7:1 / ~4,9:1).
     Auf Leinen/Naturstein bestehen beide NICHT (< 4,5:1) — dort Akzentfarben nur als
     Headline >=24px, Icon oder gefuellte Flaeche mit hellem Text verwenden. */

  /* ---------- Semantische Tokens (hell = Standard) ---------- */
  --color-bg: var(--color-kalkweiss);
  --color-surface: var(--color-white);
  --color-surface-muted: var(--color-leinen);
  --color-surface-strong: var(--color-naturstein);
  --color-text: var(--color-graphit);
  --color-text-muted: #4a4a48;
  --color-text-subtle: #6b6b68;
  --color-border: var(--color-leinen);
  --color-border-input: var(--color-naturstein);

  /* "Tint"-Varianten der Akzentfarben: identisch zur Basisfarbe im Hellmodus,
     im Dunkelmodus aufgehellt fuer ausreichenden Text-/Rahmen-Kontrast (siehe
     [data-theme="dark"] unten). Nur fuer Akzentfarbe-als-Text/Rahmen verwenden,
     NICHT fuer gefuellte Flaechen (Buttons/Panels bleiben bei --brand-*-accent). */
  --brand-accent-tint: var(--brand-accent);
  --brand-therm-accent-tint: var(--brand-therm-accent);
  --brand-holzbau-accent-tint: var(--brand-holzbau-accent);

  /* Textfarbe AUF --brand-accent (gefuellte Flaechen wie .btn-accent).
     Default: --color-bg, da --brand-accent auf Dach-Seiten ohne Marken-Kontext
     selbst auf --color-text faellt und daher je Theme kippt (dunkler Text auf
     hellem Akzent im Dark Mode, heller Text auf dunklem Akzent im Light Mode).
     Wo --brand-accent stattdessen eine fixe Markenfarbe ist (therm.css/
     holzbau.css sowie [data-active-bereich] in components.css), wird dieser
     Wert dort auf das fixe --color-white ueberschrieben. */
  --brand-accent-contrast: var(--color-bg);

  /* Typografie */
  --font-heading: 'Montserrat', 'Century Gothic', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', Roboto, sans-serif;

  --fs-900: clamp(2.75rem, 2rem + 3vw, 4.5rem);        /* Hero */
  --fs-800: clamp(2.25rem, 1.85rem + 1.8vw, 3.25rem);  /* H1 */
  --fs-700: clamp(1.625rem, 1.4rem + 1vw, 2.25rem);    /* H2 */
  --fs-600: 1.5rem;                                     /* H3 */
  --fs-500: 1.1875rem;                                  /* Lead */
  --fs-400: 1.0625rem;                                  /* Body */
  --fs-300: 0.9375rem;                                  /* Klein / Footer / Nav / Buttons */

  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* Abstands-Skala */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-pad: var(--space-5);
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Bewegung — dezent, architektonisch, keine verspielten Animationen */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  --shadow-sm: 0 1px 3px rgba(25, 26, 24, 0.08);
  --shadow-md: 0 4px 16px rgba(25, 26, 24, 0.10);
}

@media (min-width: 768px) {
  :root {
    --container-pad: var(--space-7);
  }
}

/* ---------- Dark Mode: ueberschreibt nur die semantischen Tokens ---------- */
[data-theme="dark"] {
  --color-bg: #121310;
  --color-surface: #292722;
  --color-surface-muted: var(--color-graphit);
  --color-surface-strong: #211F1A;
  --color-text: var(--color-kalkweiss);
  --color-text-muted: #B8B2A4;
  --color-text-subtle: #8F897C;
  --color-border: rgba(245, 241, 233, 0.14);
  --color-border-input: rgba(245, 241, 233, 0.32);

  /* Dach-Bereiche bleiben monochrom, jetzt auf Kalkweiss statt Graphit */
  --brand-accent: var(--color-text);
  --brand-accent-dark: var(--color-text);
  --brand-accent-tint: var(--color-text);

  /* Aufgehellte Akzentfarben, nur fuer Text/Rahmen auf dunklem Grund (siehe oben) */
  --brand-therm-accent-tint: #D9764E;
  --brand-holzbau-accent-tint: #75A38F;
}