/* ══════════════════════════════════════════════════════════════════════════
   SOUD-XT: CYBERPUNK MIDNIGHT GLASSMORPHISM DESIGN SYSTEM
   Tokens, reset, scrollbar, base typography
   ══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fira+Code:wght@500;700&display=swap');

:root {
  --bg-dark: #060913;
  --bg-darker: #020408;
  --glass-bg: rgba(10, 15, 30, 0.5);
  --glass-bg-hover: rgba(20, 30, 55, 0.7);
  --glass-bg-card: rgba(9, 13, 26, 0.65);
  --glass-border: rgba(255, 255, 255, 0.055);
  --glass-border-focus: rgba(0, 242, 254, 0.35);

  /* Cyber Neon Colors */
  --neon-cyan: #00f2fe;
  --neon-cyan-dark: #008fa8;
  --neon-emerald: #10b981;
  --neon-emerald-dark: #065f46;
  --neon-rose: #f43f5e;
  --neon-rose-dark: #9f1239;
  --neon-purple: #a855f7;
  --neon-purple-dark: #6b21a8;

  /* Text states */
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dark: #020617;

  /* Card settings */
  --card-radius: 16px;
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset & Scrollbar ── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--bg-dark);
  background-image:
    radial-gradient(circle at 5% 5%, rgba(168, 85, 247, 0.08) 0%, transparent 35%),
    radial-gradient(circle at 95% 95%, rgba(0, 242, 254, 0.07) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.3) 0%, var(--bg-darker) 100%);
  background-attachment: fixed;
  color: var(--text-main);
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

::-webkit-scrollbar-track {
  background: rgba(3, 7, 18, 0.6);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--neon-cyan);
}

/* ── Typography Headers ── */
h1, h2, h3, h4, h5 {
  font-weight: 700;
  letter-spacing: -0.5px;
}

.hidden {
  display: none !important;
}