/* ==========================================================================
   variables.css — Global CSS Custom Properties & Google Fonts
   AfD Kreisverband Altötting
   Source: Figma Design "Alternita WP designs" (node 5-1301)
   ========================================================================== */

/* Google Fonts — Barlow Family */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;700&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap');

:root {

    /* ----------------------------------------
       Colors (from Figma)
    ---------------------------------------- */
    --color-primary:        #0d1f3c;   /* Dark Navy — heading, text */
    --color-secondary:      #0057a8;   /* Accent Blue — link, icon */
    --color-accent:         #e10000;   /* AfD Red — highlight */
    --color-accent-light:   #14a0d7;   /* Light fresh blue */
    --color-text:           #0d1f3c;
    --color-text-muted:     #5a6a85;   /* Caption, placeholder */
    --color-text-mid:       #3a4a6a;   /* Secondary content */
    --color-bg-white:       #ffffff;
    --color-bg-light:       #f0f5fc;   /* Alternating section background */
    --color-bg-card:        #f4f8fd;   /* Card background */
    --color-bg-accent:      #dce8f8;   /* Badge, tag */
    --color-footer-bg:      #080d1a;   /* Footer background */

    /* ----------------------------------------
       Gradients
    ---------------------------------------- */
    --topbar-gradient: linear-gradient(
        to bottom right,
        #071830 0%,
        #003d7a 50%,
        #0057a8 100%
    );

    /* ----------------------------------------
       Typography
    ---------------------------------------- */
    --font-body:    'Barlow', sans-serif;
    --font-heading: 'Barlow Condensed', sans-serif;
    --font-nav:     'Barlow Semi Condensed', sans-serif;

    /* Font sizes (Figma scale → px) */
    --fs-hero:      96px;
    --fs-h1:        72px;
    --fs-h2:        48px;
    --fs-h3:        45px;
    --fs-h4:        23px;
    --fs-body-lg:   18px;
    --fs-body:      15px;
    --fs-body-sm:   13px;
    --fs-small:     12px;
    --fs-nav:       12px;

    /* ----------------------------------------
       Layout & Spacing
    ---------------------------------------- */
    --container-max:    1280px;
    --container-px:     40px;
    --container-px-sm:  16px;

    /* Component heights */
    --topbar-height:    42px;
    --nav-height:       72px;

    /* ----------------------------------------
       Transitions
    ---------------------------------------- */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow:   0.35s ease;

    /* ----------------------------------------
       Border radius
    ---------------------------------------- */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-full: 9999px;
}