/* ===================================================================
   TOKENS — die einzige Quelle für Farben, Typografie, Abstände.
   Ersetzt die vier auseinandergedrifteten :root-Blöcke im Projekt.

   Wird von jeder Seite als erstes Stylesheet geladen. Eine Änderung
   hier wirkt auf die gesamte Website.
   =================================================================== */

:root {
    /* ── FARBEN ──────────────────────────────────────────────────
       Kanonisch ist die Palette der 25 Hauptseiten. Die drei
       Tool-Seiten benutzten bisher eigene Werte — siehe ALIASES. */
    --primary:        #0a2e1f;
    --primary-light:  #134d35;
    --primary-dark:   #061c13;
    --accent:         #c8a45e;
    --accent-light:   #e0c882;
    --accent-dark:    #a8863f;

    --bg:             #fafaf7;
    --bg-alt:         #f0efe8;
    --surface:        #ffffff;
    --border:         #e0ddd4;
    --border-strong:  #c9c4b6;

    --text:           #1a1a1a;
    --text-light:     #5a5a5a;
    --text-inverse:   #ffffff;

    --success:        #3e7a52;
    --warning:        #b8860b;
    --danger:         #a63d3d;

    /* Transparente Ableitungen — nicht hart kodieren */
    --accent-wash:    rgba(200, 164, 94, 0.08);
    --accent-ring:    rgba(200, 164, 94, 0.30);
    --on-primary-70:  rgba(255, 255, 255, 0.75);
    --on-primary-40:  rgba(255, 255, 255, 0.50);
    --on-primary-15:  rgba(255, 255, 255, 0.15);

    /* ── TYPOGRAFIE ──────────────────────────────────────────────
       Fließende Größen: skalieren stufenlos zwischen 360px und
       1200px Viewport. Ersetzt die Font-Size-Overrides in den
       Breakpoints 768px und 480px. */
    --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;

    --text-xs:   0.78rem;
    --text-sm:   0.88rem;
    --text-base: 1rem;
    --text-lg:   clamp(1.02rem, 0.97rem + 0.22vw, 1.15rem);
    --text-xl:   clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
    --text-2xl:  clamp(1.35rem, 1.15rem + 0.85vw, 1.85rem);
    --text-3xl:  clamp(1.75rem, 1.35rem + 1.75vw, 2.4rem);
    --text-4xl:  clamp(2.1rem,  1.45rem + 2.9vw,  3.2rem);

    --leading-tight:  1.15;
    --leading-snug:   1.35;
    --leading-normal: 1.6;
    --leading-relaxed:1.7;

    /* ── ABSTÄNDE ────────────────────────────────────────────────
       Eine Skala statt frei gewählter rem-Werte. */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  2.5rem;
    --space-8:  3rem;
    --space-9:  4rem;
    --space-10: 5rem;

    /* Innenabstand von Sections — fließend statt zwei Breakpoints */
    --section-y: clamp(3rem, 1.6rem + 5.5vw, 5rem);
    --section-x: clamp(1rem, 0.4rem + 2.5vw, 2rem);

    /* ── LAYOUT ──────────────────────────────────────────────────*/
    --width-page:  1200px;
    --width-text:  680px;
    --width-prose: 800px;
    --header-h:    70px;

    /* ── FORM & TIEFE ────────────────────────────────────────────*/
    --radius-sm:   8px;
    --radius:      12px;
    --radius-lg:   20px;
    --radius-full: 999px;

    --shadow-sm: 0 1px 3px rgba(10, 46, 31, 0.06);
    --shadow:    0 4px 24px rgba(10, 46, 31, 0.08);
    --shadow-lg: 0 12px 48px rgba(10, 46, 31, 0.12);

    /* ── BEWEGUNG ────────────────────────────────────────────────
       Zwei Kurven statt eines pauschalen `all 0.3s` überall. */
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --duration:    0.25s;
    --duration-lg: 0.6s;

    /* Höhe der Sticky-Leiste auf Mobil — Inhalt darf nie darunter
       verschwinden. Wird in base.css als Body-Padding verrechnet. */
    --sticky-bar-h: 0px;

    /* ── ALIASES (Migration) ─────────────────────────────────────
       Die Tool-Seiten (BU-Rechner, PKV/GKV-Quiz, Rentenlücke)
       benutzen eigene Variablennamen mit leicht anderen Werten.
       Diese Aliase zeigen dorthin, wo sie hingehören — damit lassen
       sich die drei Seiten umstellen, ohne jede Regel anzufassen.
       Nach der Migration ersatzlos streichen. */
    --gold:    var(--accent);
    --gold-2:  var(--accent-light);
    --green:   var(--primary);
    --green-2: var(--primary-light);
    --cream:   var(--bg);
    --cream-2: var(--bg-alt);
    --ink:     var(--text);
    --line:    var(--border);
    --good:    var(--success);
    --muted:   #5e6357;                /* eigener Grauton der Tool-Seiten */

    /* Aus dem Bestand der übrigen Seiten. Werden von den aus dem alten
       Inline-CSS übernommenen Regeln benutzt. */
    --white:      var(--surface);
    --transition: all var(--duration) var(--ease);
}

@media (max-width: 768px) {
    /* Muss der Höhe von .gnav-sticky-cta in en-global-nav.css entsprechen. */
    :root { --sticky-bar-h: 56px; }
}