/* ============================================================
   TOKENS — die EINZIGE Datei mit Designentscheidungen.
   Befüllt aus dna.yaml (Stand 02.08.2026: Style Tile B Plakat
   + Oberflächen-Revision aus Pauls Referenz-Einordnung).
   Alles andere referenziert nur Variablen.
   ============================================================ */

:root {
  /* Farben (dna.yaml → farben, max. 3 Eigenfarben + Neutrale) */
  --farbe-flaeche: #FFFFFF;      /* Grundfläche: Weiß (Vorgabe Paul) */
  --farbe-flaeche-alt: color-mix(in srgb, var(--farbe-akzent-hell) 9%, var(--farbe-flaeche));
                                 /* Wechselfläche: helles Akzent-Blau (v3: Grau abgelehnt) */
  --farbe-text: #16181A;
  --farbe-text-gedimmt: color-mix(in srgb, var(--farbe-text) 62%, var(--farbe-flaeche));
  /* Akzent-Logik: Pauls Blau #4A92C0 schafft auf Weiß nur ~3.4:1.
     Deshalb zwei Rollen: akzent-hell = Original für Großes und Dunkelfläche,
     akzent = dunklere Ableitung (~5:1 auf Weiß) für Links, Fokus, CTA. */
  --farbe-akzent: #35749E;       /* Arbeits-Akzent: Links, Fokus, kleine Akzente */
  --farbe-akzent-hell: #4A92C0;  /* Pauls Original: Kicker groß, Zahlen auf Dunkel, Flächen */
  --farbe-akzent-tief: color-mix(in srgb, var(--farbe-akzent) 78%, var(--farbe-dunkel));  /* dunkles Ende des CTA-Verlaufs */
  --farbe-auf-akzent: #FFFFFF;   /* geprüft: >=4.5:1 auf akzent UND akzent-tief */
  --farbe-dunkel: #152430;       /* die EINE Dunkelfläche pro Seite */
  --farbe-sterne: #FBBC04;       /* Google-Sterne-Gelb, NUR Bewertungssterne (Fremdfarbe wie Logo) */
  --farbe-auf-dunkel: #FFFFFF;
  --farbe-linie: color-mix(in srgb, var(--farbe-text) 24%, transparent);

  /* Typografie — dna.yaml: plakat-grotesk, Skala 1.25, Sprung H1 2.4 */
  --schrift-display: "Schibsted Grotesk", system-ui, sans-serif;
  --schrift-text: "Figtree", system-ui, sans-serif;
  --display-gewicht: 900;
  --skala: 1.25;
  --text-basis: 1.125rem;
  --text-s: calc(var(--text-basis) / var(--skala));
  --text-m: var(--text-basis);
  --text-l: calc(var(--text-basis) * var(--skala));
  --text-xl: calc(var(--text-l) * var(--skala));
  --text-2xl: calc(var(--text-xl) * var(--skala));
  --text-3xl: calc(var(--text-2xl) * var(--skala));
  --text-display: calc(var(--text-3xl) * var(--skala));   /* = 2.44x Fließtext, Sprung 2.4 */
  --zeilenhoehe-text: 1.55;
  --zeilenhoehe-eng: 1.05;       /* Plakat: enge Headline-Zeilen */

  /* Form (dna.yaml → form) */
  --radius: 2px;                 /* Buttons und Eingabefelder: alle Ecken */
  /* Ecken-Motiv "Finanzierungsakte" (Entscheidung Paul 03.08.2026):
     größere Flächen bekommen EINE weiche Ecke rechts unten, wie eine
     umgeschlagene Dokumentenecke. Drei Stufen, Buttons/Inputs ausgenommen. */
  --ecke-gross: 0 0 40px 0;      /* große Bilder, Hero-Medien, Fall-Karten */
  --ecke-karte: 0 0 24px 0;      /* Karten: Formular, Trust, Leistungen, Stimmen */
  --ecke-klein: 0 0 12px 0;      /* kleine Hinweis-Kästen */
  --ecke-rund: 999px;            /* Vollrund: Avatare, Bewertungs-Pille, Zeitstrahl-Punkte */
  --linie: 1.5px solid var(--farbe-linie);   /* "dickere Linien, nicht alles ganz fein" */

  /* Oberflächen-Register (dna.yaml → oberflaeche, Revision 02.08.2026):
     schatten karten-flach + kontur kraeftig + toenung eine-dunkelflaeche
     + verlauf nur auf CTA. akzentkante bleibt bewusst none. */
  --schatten-flach: 0 2px 10px color-mix(in srgb, var(--farbe-dunkel) 12%, transparent);
  --schatten-schwebend: none;    /* zweite Stufe bewusst ungenutzt */
  --schatten-keine: none;        /* explizites Abschalten (Kontur-Karten) */
  --kontur: 2.5px solid var(--farbe-text);   /* Fassung für EINE Elementklasse (karte--kontur) */
  --verlauf-zonierung: none;
  --verlauf-akzent: linear-gradient(135deg, var(--farbe-akzent), var(--farbe-akzent-tief));   /* nur CTA */
  --farbe-toenung: var(--farbe-flaeche-alt);
  --akzentkante: none;

  /* Layout (dna.yaml: Container 1200 zentriert, Dichte mittel) */
  --container-max: 1200px;
  --raum-1: 0.5rem;
  --raum-2: 1rem;
  --raum-3: 2rem;
  --raum-4: 4rem;
  --raum-sektion: 6rem;
  --textspalte: 65ch;
}