/* ===== CSS VARIABLES ===== */
:root {
    --transition-speed: 0.35s;
}

[data-theme="dark"] {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: #16161f;
    --bg-card-hover: #1c1c28;
    --bg-glass: rgba(22, 22, 31, 0.7);
    --text-primary: #f0f0f5;
    --text-secondary: #8888a0;
    --text-muted: #55556a;
    --accent: #6c5ce7;
    --accent-hover: #7c6ef7;
    --accent-glow: rgba(108, 92, 231, 0.3);
    --accent-secondary: #00cec9;
    --border: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);
    --gradient-hero: linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 60px rgba(108, 92, 231, 0.15);
    --code-bg: #1a1a2e;
    --toggle-bg: #2a2a3a;
}

[data-theme="light"] {
    --bg-primary: #f8f9fc;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f1f5;
    --bg-glass: rgba(255, 255, 255, 0.8);
    --text-primary: #1a1a2e;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --accent: #6c5ce7;
    --accent-hover: #5a4bd5;
    --accent-glow: rgba(108, 92, 231, 0.15);
    --accent-secondary: #00b4a6;
    --border: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.15);
    --gradient-hero: linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06);
    --shadow-glow: 0 0 60px rgba(108, 92, 231, 0.08);
    --code-bg: #f0f0f8;
    --toggle-bg: #e2e4ea;
}