:root {
    --purple: #7A17AA;
    --cyan: #0ADDE9;
    --amber: #e8a87c;
    --purple-dark: #5a0f7e;
    --cyan-dark: #08b8c9;
    --purple-rgb: 122, 23, 170;
    --cyan-rgb: 10, 221, 233;
    --amber-rgb: 232, 168, 124;
    --bg-deep: #0c0814;
    --bg-deep-rgb: 12, 8, 20;
    --bg-card: rgba(255, 255, 255, 0.045);
    --bg-card-hover: rgba(255, 255, 255, 0.07);
    --text: #f4f0f8;
    --text-muted: rgba(244, 240, 248, 0.62);
    --text-dim: rgba(244, 240, 248, 0.42);
    --error: #ff6b8a;
    --gradient: linear-gradient(135deg, var(--purple) 0%, var(--cyan) 100%);
    --gradient-soft: linear-gradient(135deg, rgba(var(--purple-rgb), 0.28) 0%, rgba(var(--cyan-rgb), 0.18) 100%);
    --radius: 16px;
    --radius-lg: 24px;
    --font: 'Manrope', system-ui, sans-serif;
    --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
    --shadow: 0 8px 40px rgba(0, 0, 0, 0.28);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --transition: 0.45s var(--ease-out);
    --focus-ring: 0 0 0 3px rgba(var(--cyan-rgb), 0.18);
}