:root {
    --bg-0: #1B1714;
    --bg-1: #262120;
    --bg-2: #332D29;
    --border: #352E2A;
    --border-soft: #3A332E;

    --text: #F5F1EC;
    --text-soft: #C9C0B8;
    --text-muted: #A89E97;
    --text-dim: #8F867F;

    --magenta: #F2569F;
    --magenta-hover: #FF7AB8;
    --magenta-glow: rgba(242, 86, 159, 0.35);

    --cyan: #35C6DA;
    --cyan-glow: rgba(53, 198, 218, 0.30);

    --online: #57D68C;
    --danger: #FF6A5C;

    --gradient-brand: linear-gradient(135deg, #F2569F, #35C6DA);
    --gradient-brand-text: linear-gradient(90deg, #F2569F, #35C6DA);

    --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-full: 99px;

    --elev-0: 1px solid var(--border);
    --elev-1: 0 4px 16px rgba(0, 0, 0, 0.35);
    --elev-2: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(245, 241, 236, 0.06);

    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-fast: 120ms;
    --dur-med: 240ms;
    --dur-slow: 400ms;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.65; transform: scale(1.15); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ringpulse {
    0%   { transform: scale(0.75); opacity: 0.8; }
    100% { transform: scale(1.35); opacity: 0; }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}