:root {
    /* Palette: neon tech / osmi-it inspired */
    --bg-primary: #050507;
    --bg-secondary: #0a0a10;
    --bg-card: rgba(255, 255, 255, 0.03);
    --bg-card-hover: rgba(255, 255, 255, 0.06);
    --bg-glass: rgba(15, 15, 28, 0.6);

    --text-primary: #ffffff;
    --text-secondary: #a0a0b8;
    --text-muted: #6b6b85;

    --accent-cyan: #00d4ff;
    --accent-purple: #a855f7;
    --accent-pink: #ec4899;
    --accent-blue: #3b82f6;
    --accent: var(--accent-cyan);
    --accent-light: #7ee7ff;
    --accent-dark: #0891b2;

    --gradient-primary: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 50%, var(--accent-pink) 100%);
    --gradient-soft: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(168, 85, 247, 0.12) 50%, rgba(236, 72, 153, 0.08) 100%);
    --gradient-glow: radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.25) 0%, rgba(168, 85, 247, 0.15) 40%, transparent 70%);

    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.15);
    --border-glow: rgba(0, 212, 255, 0.3);

    /* Typography */
    --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.75rem;
    --text-5xl: 3.5rem;
    --text-6xl: 5rem;
    --text-7xl: 6.5rem;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 5rem;
    --space-3xl: 7rem;

    /* Layout */
    --container-max: 1200px;
    --container-padding: clamp(1.25rem, 5vw, 3rem);
    --radius: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
    :root {
        --text-5xl: 2.5rem;
        --text-6xl: 3rem;
        --text-7xl: 4rem;
        --space-3xl: 4rem;
        --radius-lg: 16px;
        --radius-xl: 20px;
    }
}