/* ===== KLAR.RAUM BASE STYLES ===== */
/* Shared foundation: Reset, Variables, Animations */
/* Loaded by ALL pages via <link rel="stylesheet" href="/css/base.css"> */

/* ===== CSS RESET ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== ROOT VARIABLES - KLAR.RAUM BRAND ===== */
:root {
    /* Colors */
    --color-cyan: #00D9FF;
    --color-cyan-dark: #00B8D4;
    --color-black: #0A0A0A;
    --color-white: #FFFFFF;
    --color-gray-dark: #4A4A4A;
    --color-gray-medium: #E0E0E0;
    --color-gray-light: #F5F5F5;
    --color-warm: #C6613F;

    /* Typography */
    --font-primary: 'Space Grotesk', -apple-system,
        BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing - Base-8 Scale (canonical) */
    --space-xs: 8px;
    --space-s: 16px;
    --space-m: 24px;
    --space-l: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 96px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);

    /* Transitions */
    --transition-base: 0.2s ease;
}

/* ===== SHARED ANIMATIONS ===== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}