/* ================================================================
   CodeX — Dev Toolbox Platform
   assets/css/base.css | Variables, Reset, Typography
   Author: Sabbir Hasan | GitHub: Dark-Devil-king
================================================================ */

/* ===== DESIGN TOKENS ===== */
:root {
  /* Colors */
  --bg-primary:   #03030a;
  --bg-secondary: #07071a;
  --bg-card:      rgba(255,255,255,0.03);
  --glass-border: rgba(0,245,255,0.12);
  --glass-blur:   blur(20px);

  /* Neon palette */
  --cyan:   #00f5ff;
  --purple: #b060ff;
  --blue:   #3d9bff;
  --pink:   #ff3dbd;
  --green:  #00ff88;
  --yellow: #ffe600;

  /* Text */
  --text-primary:   #e8eaf6;
  --text-secondary: rgba(232,234,246,0.6);
  --text-dim:       rgba(232,234,246,0.35);

  /* Glow shadows */
  --glow-cyan:   0 0 20px rgba(0,245,255,0.6),   0 0 60px rgba(0,245,255,0.25),   0 0 120px rgba(0,245,255,0.1);
  --glow-purple: 0 0 20px rgba(176,96,255,0.6),   0 0 60px rgba(176,96,255,0.25),  0 0 120px rgba(176,96,255,0.1);
  --glow-pink:   0 0 20px rgba(255,61,189,0.6),   0 0 60px rgba(255,61,189,0.25);
  --glow-green:  0 0 20px rgba(0,255,136,0.6),    0 0 60px rgba(0,255,136,0.25);
  --glow-blue:   0 0 20px rgba(61,155,255,0.6),   0 0 60px rgba(61,155,255,0.25);

  /* Misc */
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
  --radius:     16px;
  --radius-sm:  10px;
}

/* ===== LIGHT THEME OVERRIDES ===== */
[data-theme="light"] {
  --bg-primary:     #f0f4ff;
  --bg-secondary:   #e4eaf8;
  --bg-card:        rgba(255,255,255,0.7);
  --glass-border:   rgba(61,155,255,0.25);
  --text-primary:   #0d0d1c;
  --text-secondary: rgba(13,13,28,0.65);
  --text-dim:       rgba(13,13,28,0.35);
}

/* ===== RESET ===== */
*,*::before,*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
}
body {
  font-family: 'Exo 2', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
  line-height: 1.6;
}
a  { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul  { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; outline: none; }
input, textarea, select { font-family: inherit; }

/* ===== CUSTOM SCROLLBAR ===== */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cyan), var(--purple));
  border-radius: 99px;
  box-shadow: 0 0 8px var(--cyan);
}

/* ===== TEXT SELECTION ===== */
::selection {
  background: rgba(0,245,255,0.25);
  color: var(--cyan);
}

/* ===== TYPOGRAPHY HELPERS ===== */
.font-mono { font-family: 'Share Tech Mono', monospace; }
.font-orb  { font-family: 'Orbitron', sans-serif; }

/* ===== KEYFRAMES ===== */
@keyframes pulse        { 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }
@keyframes neonPulse    { 0%,100%{ filter:drop-shadow(0 0 20px rgba(0,245,255,0.8)); } 50%{ filter:drop-shadow(0 0 40px rgba(176,96,255,0.8)); } }
@keyframes blink        { 50%{ opacity:0.3; } }
@keyframes fadeSlideDown{ from{ opacity:0; transform:translateY(-20px); } to{ opacity:1; transform:translateY(0); } }
@keyframes orbFloat     { 0%,100%{ transform:translate(0,0); } 33%{ transform:translate(25px,-25px); } 66%{ transform:translate(-20px,20px); } }
@keyframes neonLine     { 0%{ left:-70%; opacity:0; } 20%{ opacity:0.6; } 80%{ opacity:0.4; } 100%{ left:120%; opacity:0; } }
@keyframes plBar        { to{ width:100%; } }
@keyframes ripple       { to{ transform:scale(2.5); opacity:0; } }
@keyframes terminalSlideIn { from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } }
@keyframes spin         { to{ transform:rotate(360deg); } }
@keyframes rotateDot    { to{ transform:rotate(360deg) translateX(90px); } }
@keyframes rotateDotR   { to{ transform:rotate(-360deg) translateX(90px); } }
@keyframes ringPulse    { 0%,100%{ opacity:0.8; transform:scale(1); } 50%{ opacity:0.3; transform:scale(1.05); } }
@keyframes ringPulseR   { 0%,100%{ opacity:0.5; transform:scale(1); } 50%{ opacity:0.15; transform:scale(1.08); } }