/* index.css */

:root {
  /* Default: White (Light) Theme */
  --bg-base: #f8fafc;
  --bg-surface: #ffffff;
  --bg-card: #f1f5f9;
  --text-base: #0f172a;
  --text-muted: #64748b;
  --border-main: #e2e8f0;
  --accent: #2563eb;
  --ist-orange: rgba(255, 153, 51, 0.08);
}

[data-theme='midnight'] {
  --bg-base: #020617;
  --bg-surface: #0f172a;
  --bg-card: #1e293b;
  --text-base: #f8fafc;
  --text-muted: #94a3b8;
  --border-main: #334155;
  --accent: #3b82f6;
  --ist-orange: transparent;
}

[data-theme='blackout'] {
  --bg-base: #000000;
  --bg-surface: #0a0a0a;
  --bg-card: #141414;
  --text-base: #ffffff;
  --text-muted: #737373;
  --border-main: #262626;
  --accent: #3b82f6;
  --ist-orange: transparent;
}

[data-theme='cyber'] {
  --bg-base: #09021a;
  --bg-surface: #130533;
  --bg-card: #1e0a4d;
  --text-base: #fdfaff;
  --text-muted: #9b72cf;
  --border-main: #3d1b7d;
  --accent: #d946ef;
  --ist-orange: transparent;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-base);
  color: var(--text-base);
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
  -webkit-font-smoothing: antialiased;
}

/* Decorative Orange Element */
body::before {
  content: '';
  position: fixed;
  top: -5%;
  right: -5%;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, var(--ist-orange) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
}

/* Typography & Utility */
.mono { font-family: 'JetBrains Mono', monospace; }

.bg-theme-base { background-color: var(--bg-base); }
.bg-theme-surface { background-color: var(--bg-surface); }
.bg-theme-card { background-color: var(--bg-card); }

.text-theme-base { color: var(--text-base); }
.text-theme-muted { color: var(--text-muted); }

.border-theme-main { border: 1px solid var(--border-main); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.animate-fade { animation: fadeIn 0.5s ease-out; }

/* Custom Scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }