/* ═══════════════════════════════════════════
   FONTS, RESET, ROOT VARIABLES, COLOR UTILITIES
   Glassmorphism Purple Theme
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=JetBrains+Mono:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root {
    --bg-body: #E8DFEF;
    --bg-gradient: linear-gradient(135deg, #E8DFEF 0%, #D4C4E0 25%, #E0D0EC 50%, #F0E4F5 75%, #E5DCF0 100%);
    --bg-card: rgba(255, 255, 255, 0.42);
    --bg-card-hover: rgba(255, 255, 255, 0.55);
    --bg-inset: rgba(255, 255, 255, 0.35);
    --bg-header: linear-gradient(135deg, #6C3FA0 0%, #8B5FBF 40%, #A37BD4 100%);
    --border: rgba(255, 255, 255, 0.45);
    --border-hover: rgba(168, 120, 220, 0.6);
    --glass-blur: 18px;
    --shadow-sm: 0 2px 8px rgba(108, 63, 160, 0.06), 0 1px 3px rgba(0,0,0,0.03);
    --shadow-md: 0 8px 32px rgba(108, 63, 160, 0.12), 0 2px 8px rgba(0,0,0,0.04);
    --shadow-hover: 0 12px 40px rgba(108, 63, 160, 0.16), 0 4px 12px rgba(0,0,0,0.05);
    --text-primary: #2D1B4E;
    --text-secondary: #6B5B7B;
    --text-dim: #9A8DAB;
    --accent: #8B5CF6;
    --accent-light: rgba(139, 92, 246, 0.12);
    --accent-dim: rgba(139, 92, 246, 0.06);
    --accent-gradient: linear-gradient(135deg, #8B5CF6, #A78BFA, #C4B5FD);
    --teal: #8B5CF6;
    --teal-light: rgba(139, 92, 246, 0.1);
    --teal-dim: rgba(139, 92, 246, 0.06);
    --gold: #E879A0;
    --gold-light: rgba(232, 121, 160, 0.1);
    --green: #10B981;
    --green-bg: rgba(16, 185, 129, 0.08);
    --red: #EF4444;
    --red-bg: rgba(239, 68, 68, 0.08);
    --yellow: #F59E0B;
    --yellow-bg: rgba(245, 158, 11, 0.08);
    --blue: #6366F1;
    --purple: #A855F7;
    --card-radius: 18px;
    --font-display: 'DM Sans', 'Noto Sans SC', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
}

/* White Theme */
body.theme-white {
    --bg-body: #FFFFFF;
    --bg-gradient: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F9FAFB;
    --bg-inset: #F3F4F6;
    --bg-header: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
    --border: #E5E7EB;
    --border-hover: #D1D5DB;
    --glass-blur: 0px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --text-primary: #111827;
    --text-secondary: #4B5563;
    --text-dim: #9CA3AF;
    --accent: #6366F1;
    --accent-light: rgba(99, 102, 241, 0.1);
    --accent-dim: rgba(99, 102, 241, 0.05);
    --accent-gradient: linear-gradient(135deg, #6366F1, #818CF8, #A5B4FC);
    --teal: #0891B2;
    --teal-light: rgba(8, 145, 178, 0.1);
    --teal-dim: rgba(8, 145, 178, 0.05);
    --gold: #F59E0B;
    --gold-light: rgba(245, 158, 11, 0.1);
}

body.theme-white::before,
body.theme-white::after {
    display: none;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-display);
    background: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text-primary);
    min-height: 100vh;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -30%;
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(139, 92, 246, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    bottom: -40%;
    right: -20%;
    width: 70%;
    height: 70%;
    background: radial-gradient(ellipse, rgba(232, 121, 160, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ═══════════════════════════════════════════
   COLOR UTILITIES
   ═══════════════════════════════════════════ */

.green { color: var(--green); }
.red { color: var(--red); }
.yellow { color: var(--yellow); }
.blue { color: var(--blue); }
.purple { color: var(--purple); }
.cyan { color: var(--accent); }

/* ═══════════════════════════════════════════
   FULL / HALF WIDTH
   ═══════════════════════════════════════════ */

.full-width { grid-column: span 4; }
.half-width { grid-column: span 2; }

/* ═══════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.35);
}