/*
 * Design Tokens — zentraler Ort für Farben, Fonts, Spacings.
 * Änderungen hier wirken sich auf das gesamte Theme aus.
 * Extrahiert aus autania-services.de (2026-04-21).
 */

:root {
    /* ========== Farben ========== */
    /* Primary / Akzent (Logo-Rot + Button-Pink) */
    --color-primary:       #EF0F27;
    --color-primary-dark:  #CC3366;
    /* Etwas dunkler als --color-primary — erfüllt WCAG-AA Kontrast (4.5:1) auf weißem Text. */
    --color-button-bg:     #D9001A;
    --color-button-bg-hover: #B30015;

    /* Corporate Blues */
    --color-navy:          #00034F;
    --color-petrol:        #183D59;
    --color-sky:           #9CDAF0;

    /* Neutrals */
    --color-text:          #000000;
    --color-text-muted:    #33373D;
    --color-text-subtle:   #54595F;
    --color-bg:            #FFFFFF;
    --color-bg-alt:        #FAF9F5;
    --color-border:        #F1F1F1;

    /* Accents */
    --color-accent-green:  #505B50;

    /* ========== Typografie ========== */
    /* Einheitliche Schriftfamilie: Inter für Body und Display. */
    --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --fs-base:      16px;
    --lh-base:      24px;

    /* Headings */
    --fs-h1:        24px;
    --lh-h1:        30px;
    --weight-h1:    700;
    --color-h1:     var(--color-primary);

    --fs-h2:        24px;
    --lh-h2:        29px;
    --weight-h2:    600;
    --color-h2:     var(--color-petrol);

    --fs-h3:        16px;
    --lh-h3:        22px;
    --weight-h3:    600;
    --color-h3:     var(--color-navy);

    --fs-h4:        15px;
    --weight-h4:    500;
    --color-h4:     #FFFFFF;

    /* ========== Spacing ========== */
    --space-1:      0.25rem;
    --space-2:      0.5rem;
    --space-3:      0.75rem;
    --space-4:      1rem;
    --space-5:      1.5rem;
    --space-6:      2rem;
    --space-7:      3rem;
    --space-8:      4rem;
    --space-9:      6rem;

    --section-py:   var(--space-9);

    /* ========== Layout ========== */
    --container-max:     1280px;
    --container-padding: 1.25rem;

    /* ========== Effects ========== */
    --shadow-sm:    0 1px 2px rgba(0,0,0,0.05);
    --shadow-md:    0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg:    0 12px 40px rgba(0,0,0,0.12);

    --transition:   150ms ease;
    --transition-slow: 300ms ease;

    --radius-sm:    2px;
    --radius-md:    4px;
}