/* ==========================================================================
   variables.css – Globale Designtokens (Farben, Typo, Spacing, Effekte)
   ========================================================================== */

:root {
    --color-bg: #050712;
    --color-bg-soft: #0B1024;
    --color-card: #111833;
    --color-card-hover: #151F42;

    --color-primary: #20286F;
    --color-primary-light: #3B6CFF;
    --color-accent: #00F0FF;
    --color-violet: #6A5CFF;

    --color-text: #F4F7FF;
    --color-muted: #A8B0D6;
    --color-dim: #6E7BB0;

    --color-border: rgba(120, 140, 255, 0.22);
    --color-border-strong: rgba(120, 140, 255, 0.45);
    --color-glass: rgba(17, 24, 51, 0.6);
    --color-glass-strong: rgba(11, 16, 36, 0.95);

    --logo-color: var(--color-primary-light);
    --scene-opacity: 1;

    /* Schrift */
    --font-heading: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, sans-serif;

    /* Layout */
    --container-width: 1180px;
    --container-narrow: 900px;
    --section-padding: 120px;
    --section-padding-mobile: 72px;

    /* Radien */
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-xl: 36px;

    /* Schatten / Glow */
    --shadow-glow: 0 0 40px rgba(0, 240, 255, 0.12);
    --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.45);
    --shadow-card-hover: 0 28px 80px rgba(59, 108, 255, 0.18);

    /* Transitions */
    --transition-fast: 180ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 600ms ease;
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);

    /* Z-Layer */
    --z-header: 100;
    --z-mobile-nav: 200;
    --z-modal: 300;
}