/* =============================================================
   ASB Wohnpark Lausitzer Seenland — tokens.css
   Designsystem-Fundament: alle CSS Custom Properties (Design Tokens).
   Basiert auf dem ASB Corporate Design (Farben + Schrift verbindlich).
   Verbindliche Kontrast-/A11y-Regeln siehe Kommentare unten.
   ============================================================= */

:root {
  /* ---------------------------------------------------------
     FARBEN — ASB Primärfarben
     --------------------------------------------------------- */
  --asb-red:        #E30613;  /* Akzent, sparsam: Claim, große Headlines, CTA-Fläche. NIE großflächiger Texthintergrund hinter Fließtext. */
  --asb-yellow:     #FFEE00;  /* Flächen-Akzent. NUR mit anthrazitfarbenem Text drauf, nie gelber Text, nie Gelb-auf-Weiß als tragendes Element. */
  --asb-anthracite: #2D2D46;  /* Standard-Schriftfarbe + dunkle Flächen. */

  /* Abgeleitete Rot-Töne (nur UI: Hover/aktiv). Keine eigene Markenfarbe,
     sondern Helligkeitsstufen von ASB-Rot — CD-konform. */
  --asb-red-dark:   #B0040F;  /* Hover/aktiv für rote Buttons (leicht abgedunkelt). */

  /* Aufrasterungen des Anthrazits (CD erlaubt Helligkeitsstufen statt eigener Grautöne) */
  --asb-anthracite-05: #F4F4F6;
  --asb-anthracite-10: #E9E9ED;
  --asb-anthracite-20: #D5D5DC;   /* zugleich die „sensible Markenbühne“ (Anthrazit 20 %) */
  --asb-anthracite-60: #6B6B7E;

  /* Aufrasterungen des Gelbs (CD: Primärfarben dürfen aufgerastert werden).
     Für ruhige, helle Akzent-Sektionen, wenn volles ASB-Gelb zu kräftig wäre.
     Text darauf bleibt IMMER Anthrazit (hoher Kontrast). */
  --asb-yellow-soft: #FFF7AD;   /* ~ Gelb 60 % auf Weiß — kräftiger Akzent, noch weich */
  --asb-yellow-tint: #FFFCD9;   /* ~ Gelb 20 % auf Weiß — sehr ruhiger Section-Grund */

  /* ---------------------------------------------------------
     FUNKTIONSFARBEN (semantische Rollen)
     --------------------------------------------------------- */
  --bg:         #FFFFFF;
  --bg-soft:    #F7F4EE;                     /* warme, ruhige Sektionsfläche (statt kühlem Grau — einladender) */
  --bg-warm:    #FBF7EF;                     /* noch hellerer Warmton für großzügige Flächen */
  --bg-dark:    var(--asb-anthracite);       /* dunkle Fläche (Footer, Akzentband) */
  --text:       var(--asb-anthracite);       /* Fließtext / Headlines */
  --text-muted: #4A4A5E;                     /* gedämpfter Text — erfüllt AA (≈8.6:1 auf Weiß) */
  --on-dark:    #FFFFFF;                      /* Text auf dunklen Flächen */
  --border:     var(--asb-anthracite-20);    /* dezente Trennlinien/Ränder */

  /* Fokus-Indikator — deutlich sichtbar, CD-konform anthrazit/rot */
  --focus-ring:        var(--asb-red);
  --focus-ring-width:  3px;
  --focus-ring-offset: 2px;

  /* ---------------------------------------------------------
     SEKUNDÄRFARBEN — laut CD NUR für Illustrationen/Infografiken.
     NICHT als UI-Akzent verwenden. Hier nur als Tokens hinterlegt.
     --------------------------------------------------------- */
  --illu-turquoise: #8CD2D2;
  --illu-darkblue:  #143782;
  --illu-orange:    #F5A000;
  --illu-blue:      #2D46FF;

  /* ---------------------------------------------------------
     TYPOGRAFIE
     Hausschrift: Noto Sans (Headlines/UI) + Noto Serif (Fließtext/Zitate).
     Fallback CD: Arial. Fonts werden self-hosted in fonts/ ergänzt (siehe base.css @font-face).
     --------------------------------------------------------- */
  --font-head: "Noto Sans", system-ui, Arial, sans-serif;
  --font-body: "Noto Serif", Georgia, "Times New Roman", serif;

  /* Fluid Type Scale (großzügig — ältere Zielgruppe) */
  --fs-h1:   clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-h2:   clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-h3:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-small: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  --lh-body: 1.65;
  --lh-head: 1.2;

  /* ---------------------------------------------------------
     SPACING, RADIUS, LAYOUT
     --------------------------------------------------------- */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --radius:    14px;   /* abgerundet — passt zur ASB-Icon-Stilistik (runde Ecken) */
  --radius-sm: 8px;
  --radius-pill: 999px;

  --maxw:      1200px; /* Content-Container */
  --maxw-text: 70ch;   /* Lesetext-Breite — hält 65–75 Zeichen/Zeile ein */

  --shadow:    0 4px 24px rgba(45, 45, 70, .08);
  --shadow-lg: 0 12px 40px rgba(45, 45, 70, .14);

  /* Mindest-Trefferfläche (Touch/Senioren) */
  --tap-min: 44px;

  /* Störer-Durchmesser (CD: drei Größen). Frei im Format platzierbar, aber sparsam. */
  --stoerer-sm:  92px;
  --stoerer-md: 124px;
  --stoerer-lg: 160px;

  /* Bewegungsdauer (wird bei prefers-reduced-motion auf 0 gesetzt) */
  --motion: 180ms;
}