/* =========================================================
   AUT0LOTTO – DESIGN SYSTEM
   Zentrale Farben, Größen, Schatten und Abstände
========================================================= */

:root {
    /* Hauptfarben */
    --al-primary: #2f6df6;
    --al-primary-light: #5c8dff;
    --al-primary-dark: #174fd1;

    --al-accent-yellow: #ffc83d;
    --al-accent-green: #57cba0;
    --al-accent-purple: #8b69f8;
    --al-accent-red: #f16669;

    /* Hintergründe */
    --al-bg: #071321;
    --al-bg-deep: #040d18;
    --al-bg-soft: #0b1929;

    --al-surface: #101f30;
    --al-surface-light: #142538;
    --al-surface-hover: #182b40;

    /* Texte */
    --al-text: #ffffff;
    --al-text-soft: #c8d2df;
    --al-text-muted: #8190a3;
    --al-text-dark: #071321;

    /* Linien */
    --al-border: rgba(255, 255, 255, 0.075);
    --al-border-strong: rgba(255, 255, 255, 0.13);
    --al-primary-border: rgba(47, 109, 246, 0.5);

    /* Status */
    --al-success: #4fc99b;
    --al-warning: #ffc83d;
    --al-danger: #ef6467;
    --al-info: #5c8dff;

    /* Rundungen */
    --al-radius-xs: 8px;
    --al-radius-sm: 12px;
    --al-radius-md: 16px;
    --al-radius-lg: 22px;
    --al-radius-xl: 28px;
    --al-radius-pill: 999px;

    /* Schatten */
    --al-shadow-small:
        0 8px 22px rgba(0, 0, 0, 0.18);

    --al-shadow-card:
        0 18px 45px rgba(0, 0, 0, 0.28);

    --al-shadow-large:
        0 28px 80px rgba(0, 0, 0, 0.38);

    --al-shadow-blue:
        0 16px 40px rgba(47, 109, 246, 0.28);

    /* Container */
    --al-container: 1320px;
    --al-container-small: 1080px;

    /* Abstände */
    --al-space-1: 4px;
    --al-space-2: 8px;
    --al-space-3: 12px;
    --al-space-4: 16px;
    --al-space-5: 20px;
    --al-space-6: 24px;
    --al-space-7: 32px;
    --al-space-8: 40px;
    --al-space-9: 48px;
    --al-space-10: 64px;
    --al-space-11: 80px;
    --al-space-12: 104px;

    /* Übergänge */
    --al-transition-fast: 160ms ease;
    --al-transition: 260ms ease;
    --al-transition-slow: 450ms ease;

    /* Header */
    --al-header-height: 78px;
}