/* ============================================================
   01 · TOKENS — Single Source of Truth fürs gesamte Design.
   ------------------------------------------------------------
   ZWEI Ebenen:
   • PRIMITIVE (Basis): Farben, Abstände, Schriftgrößen, Radien …
     halten die konkreten Werte. Das ist der EINZIGE erlaubte Ort für rohe Werte.
   • SEMANTISCHE Tokens (z. B. --card-*, --btn-*) zeigen per var() auf Primitive
     — NIE einen Wert hier doppeln (sonst propagiert eine Änderung nicht überall).
   In den CSS-REGELN (02, 03 …) steht IMMER var(--token), NIE ein roher Wert.
   ------------------------------------------------------------
   MARKE: RAISINGER WOHNIDEEN — Küchen · Bäder · Wohnkonzepte (Möllersdorf, NÖ).
   Design-Richtung: warm, hell, natürliche Materialien (Holz/Stein), premium
   aber einladend. HELLES Theme mit Espresso-Text + weichem Salbei-/Pastellgrün
   als Marken-Akzent (Grün ist die Stammfarbe des Kunden).
   Volle Begründung + Wireframes: docs/design-konzept.md
   ============================================================ */
:root {
  /* ---- Farben (warmes, helles Theme) ---- */
  --color-bg:            #f8f5f0;             /* warmes Papierweiß — nie reines #fff */
  --color-bg-subtle:     #f0ebe3;            /* leicht tieferer Warmton für abgesetzte Bänder */
  --color-surface:       #fffdfa;            /* Karten/Felder — weiches Warmweiß, kein hartes Weiß */
  --color-surface-muted: #f3eee6;            /* Eingabefelder / gedämpfte Flächen */
  --color-text:          #2a2521;            /* Espresso — Fließtext & Headings */
  --color-text-muted:    #6a6157;            /* Sekundärtext */
  --color-text-subtle:   #968c7e;            /* Meta / Footer-Feindetails */
  --color-border:        rgba(42,37,33,.12);
  --color-border-strong: rgba(42,37,33,.24);

  --color-accent:        #3f6e49;            /* Salbeigrün — Marken-Akzent (CTA, Links, aktiv). Weiß darauf ≈ 5,2:1 (AA) */
  --color-accent-soft:   #e6efe4;            /* weiches Pastellgrün — getönte Fläche für Badges/Tags/Icons/aktive Karten */
  --color-accent-deep:   #2f5638;            /* dunkleres Grün für Hover/Kontrast */
  --color-on-accent:     #ffffff;            /* Text/Icons AUF dem Akzent — IMMER weiß */

  /* Dunkle, grünstichige Fläche für Hero-Overlay, Footer, Akzent-Bänder */
  --color-ink:           #232a25;            /* tiefes Grün-Anthrazit */
  --color-ink-text:      #eef2ea;            /* Text auf dunkler Fläche */
  --color-ink-muted:     #adb7a9;            /* Sekundärtext auf dunkler Fläche */

  --color-success:       #3f7d54;
  --color-danger:        #c0392b;
  --color-white:         #ffffff;

  /* ---- Abstände ---- */
  --sp-xs: .35rem;  --sp-s: .6rem;  --sp-m: 1rem;
  --sp-l: 1.5rem;   --sp-xl: 2rem;  --sp-2xl: 3rem;  --sp-3xl: 4.5rem;
  --section-gap: clamp(4rem, 7vw, 6.5rem);
  --container-max: 1200px;
  --container-pad: 1.5rem;

  /* ---- Typografie ----
     Headings: warme Serifen-Anmutung (Editorial/Handwerk). System-Serife lädt
     nichts nach (DSGVO + Performance). Upgrade-Pfad: lokale „Fraunces“/„Cormorant“
     als @font-face (font-display:swap) — nur den Wert hier tauschen. */
  --font-heading: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-sm:   .875rem;
  --text-base: .95rem;
  --text-md:   1.05rem;
  --text-lg:   1.25rem;
  --text-xl:   1.6rem;
  --text-2xl:  clamp(2rem, 3.8vw, 3.2rem);
  --text-hero: clamp(2.3rem, 4.5vw, 3.6rem);
  --weight-normal: 400;  --weight-semibold: 600;  --weight-bold: 700;
  --leading-tight: 1.12;  --leading-snug: 1.25;  --leading-normal: 1.65;
  --tracking-tight: -0.012em;  --tracking-snug: -0.006em;
  --tracking-label: 0.06em;    --tracking-wide: 0.16em;

  /* ---- Radien (weich, wohnlich) ---- */
  --radius-md: 12px;  --radius-lg: 18px;  --radius-xl: 24px;

  /* ---- Cards ---- */
  --card-bg:      var(--color-surface);
  --card-border:  1px solid var(--color-border);
  --card-radius:  var(--radius-lg);
  --card-padding: clamp(1.5rem, 2.8vw, 2.25rem);
  --card-shadow:  0 1px 2px rgba(42,37,33,.04), 0 12px 30px -18px rgba(42,37,33,.22);

  /* ---- Buttons ---- */
  --btn-height: 3rem;  --btn-pad-y: .75rem;  --btn-pad-x: 1.4rem;
  --btn-radius: var(--radius-md);  --btn-font-size: var(--text-base);  --btn-font-weight: var(--weight-semibold);

  /* ---- Transitions ---- */
  --ease-fast: .15s ease;  --ease-base: .25s ease;
}