/* =============================================================================
   tokens.css — Kanzleimarketing-Portal · Design-System v2
   Markenfarben sebastianklingel.com (Relaunch 09/2026)
   Petrol #0B486B · Türkis #3B8686 · Mint #79DB9A (Akzent) · Poppins
   Original-Demo-Werte: tokens.css.demo-backup
   ============================================================================= */

:root {
    /* ── Markenfarben sebastianklingel.com ── */
    --color-primary:           #0B486B;   /* Petrol – Buttons, Links, Icons */
    --color-primary-hover:     #083650;
    --color-secondary:         #3B8686;   /* Türkis – Hover, Linien, Zitate, TOC */
    --color-secondary-hover:   #2E6D6D;
    --color-highlight:         #3B8686;   /* Eyebrows/Badges (Textfarbe → lesbar) */
    --color-accent:            #79DB9A;   /* Mint – nur dekorativ (Dots, Verlauf, Links auf Dunkel) */
    --color-heading:           #1D1D1F;
    --color-text:              #32323B;
    --color-text-faded:        #6F7A85;
    --color-background:        #FFFFFF;
    --color-background-alt:    #F5F5F5;   /* kühles Hellgrau mit Petrol-Stich */
    --color-background-dark:   #0B486B;
    --color-border:            #E8E9EB;
    --color-white:             #FFFFFF;

    /* ── RGB-Token (für rgba() mit Alpha) ── */
    --color-primary-rgb:       11, 72, 107;
    --color-highlight-rgb:     59, 134, 134;
    --color-accent-rgb:        121, 219, 154;
    --color-white-rgb:         255, 255, 255;

    /* ── Markenverlauf (Petrol → Türkis), für dunkle Sektionen ── */
    --gradient-brand:          linear-gradient(135deg, #0B486B 0%, #3B8686 100%);
    --gradient-brand-soft:     linear-gradient(135deg, #0B486B 0%, #2E6D6D 60%, #3B8686 100%);

    /* ── Typografie ── */
    --font-primary:            'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --line-height-body:        1.7;
    --line-height-heading:     1.15;

    /* ── Layout ── */
    --max-width:               1200px;
    --max-width-narrow:        720px;
    --gutter:                  clamp(20px, 4vw, 48px);

    /* ── Spacing-Skala ── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  16px;
    --space-4:  24px;
    --space-5:  32px;
    --space-6:  48px;
    --space-7:  64px;
    --space-8:  96px;

    /* ── Border Radius (moderat-rund, Bestand: 0.3rem/0.8em) ── */
    --radius-sm:   6px;
    --radius-md:  10px;
    --radius-lg:  18px;
    --radius-full: 9999px;
    --radius:      8px;   /* Standard: Buttons, Nav-Links */

    /* ── Effekte ── */
    --transition:          0.17s ease;

    /* Shadow Stack (Bestand: 0 1px 10px -2px rgba(21,26,35,.6) → weicher) */
    --shadow-sm:           0 1px  4px rgba(21, 26, 35, 0.06);
    --shadow-md:           0 4px 16px rgba(21, 26, 35, 0.08);
    --shadow-lg:           0 8px 32px rgba(21, 26, 35, 0.12);
    --shadow-colored:      0 4px 20px rgba(var(--color-primary-rgb), 0.14);

    /* Legacy — bleiben für Rückwärtskompatibilität */
    --box-shadow:          var(--shadow-md);
    --box-shadow-card:     var(--shadow-colored);

    /* ── Section-Spacing ── */
    --section-y:          96px;
    --section-y-md:       72px;
    --section-y-sm:       56px;
}