/* =============================
   CSS CUSTOM PROPERTIES
============================= */
:root {
  --bg-primary: #0a0d14;
  --bg-secondary: #111827;
  --bg-card: #141c2e;
  --bg-glass: rgba(20,28,46,0.85);
  --bg-hover: #1a2540;
  --border: rgba(99,120,180,0.18);
  --border-bright: rgba(99,120,180,0.35);
  --accent: #4f7cff;
  --accent-2: #7c5cfc;
  --accent-3: #00d4aa;
  --accent-warm: #ff6b4a;
  --accent-gold: #f5c842;
  --text-primary: #e8eaf0;
  --text-secondary: #8a95b0;
  --text-muted: #4a5568;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px rgba(79,124,255,0.15);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --sidebar-width: 240px;
}
[data-theme="light"] {
  --bg-primary: #f0f4fb;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-glass: rgba(255,255,255,0.9);
  --bg-hover: #eef2fa;
  --border: rgba(99,120,180,0.15);
  --border-bright: rgba(79,124,255,0.3);
  --text-primary: #1a2340;
  --text-secondary: #4a5880;
  --text-muted: #9aa3ba;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.1);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.15);
  --shadow-glow: 0 0 20px rgba(79,124,255,0.1);
}

/* =============================
   RESET & BASE
============================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;transition:background 0.3s,color 0.3s}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:4px}
input,textarea,select,button{font-family:inherit}
a{text-decoration:none;color:inherit}
img{max-width:100%}