/* ═══════════════════════════════════════════════════════
   WEBNATE — 1-base-variables.css
   Base Styles, Variables & Themes
   ═══════════════════════════════════════════════════════ */

/* ─── CSS VARIABLES / THEMES ─── */
:root {
  --bg-primary: #080810;
  --bg-secondary: #0e0e18;
  --bg-card: #13131f;
  --bg-card-hover: #1a1a2e;
  --bg-input: #161624;
  --border: rgba(255,255,255,0.05);
  --border-hover: rgba(255,255,255,0.13);
  --text-primary: #eeeef2;
  --text-secondary: #7e7e96;
  --text-muted: #4a4a5e;
  --accent: #6366f1;
  --accent-light: #818cf8;
  --accent-dim: rgba(99,102,241,0.1);
  --accent-glow: rgba(99,102,241,0.22);
  --accent-2: #8b5cf6;
  --shadow-card: 0 2px 16px rgba(0,0,0,0.35);
  --shadow-card-hover: 0 12px 40px rgba(0,0,0,0.5);
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --transition: 0.28s cubic-bezier(.4,0,.2,1);
  --spacing: 1;
}

[data-theme="light"] {
  --bg-primary: #f2f2f5;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f0f6;
  --bg-input: #f0f0f6;
  --border: rgba(0,0,0,0.07);
  --border-hover: rgba(0,0,0,0.16);
  --text-primary: #16161f;
  --text-secondary: #52526a;
  --text-muted: #8888a0;
  --accent: #4f46e5;
  --accent-light: #6366f1;
  --accent-dim: rgba(79,70,229,0.07);
  --accent-glow: rgba(79,70,229,0.16);
  --accent-2: #7c3aed;
  --shadow-card: 0 2px 16px rgba(0,0,0,0.05);
  --shadow-card-hover: 0 12px 40px rgba(0,0,0,0.1);
}

[data-theme="midnight"] {
  --bg-primary: #0a0e14;
  --bg-secondary: #111820;
  --bg-card: #161e28;
  --bg-card-hover: #1e2836;
  --bg-input: #151d26;
  --border: rgba(48,161,235,0.08);
  --border-hover: rgba(48,161,235,0.22);
  --text-primary: #dce8f0;
  --text-secondary: #6e7f92;
  --text-muted: #414a56;
  --accent: #30a1eb;
  --accent-light: #58b6d3;
  --accent-dim: rgba(48,161,235,0.09);
  --accent-glow: rgba(48,161,235,0.2);
  --accent-2: #06b6d4;
  --shadow-card: 0 2px 16px rgba(0,0,0,0.4);
  --shadow-card-hover: 0 12px 40px rgba(0,0,0,0.5);
}

[data-theme="slate"] {
  --bg-primary: #0c0f15;
  --bg-secondary: #131821;
  --bg-card: #1a2030;
  --bg-card-hover: #232c3e;
  --bg-input: #161c2a;
  --border: rgba(148,163,184,0.09);
  --border-hover: rgba(148,163,184,0.2);
  --text-primary: #dce4ee;
  --text-secondary: #6f7e92;
  --text-muted: #434f65;
  --accent: #8b5cf6;
  --accent-light: #a78bfa;
  --accent-dim: rgba(139,92,246,0.09);
  --accent-glow: rgba(139,92,246,0.2);
  --accent-2: #c084fc;
  --shadow-card: 0 2px 16px rgba(0,0,0,0.38);
  --shadow-card-hover: 0 12px 40px rgba(0,0,0,0.48);
}

/* ─── PERSONALIZATION OVERRIDES ─── */
[data-compact="true"] { --spacing: 0.6; }
[data-highcontrast="true"] {
  --text-secondary: var(--text-primary);
  --text-muted: var(--text-secondary);
  --border: rgba(255,255,255,0.22);
}
[data-highcontrast="true"][data-theme="light"] { --border: rgba(0,0,0,0.28); }

/* ─── RESET ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; font-size: 14px; }
body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background 0.45s, color 0.45s;
  -webkit-font-smoothing: antialiased;
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { 
    animation-play-state: paused !important;
    transition-duration: 0.01ms !important;
  }
}

[data-reducedmotion="true"] * {
  animation-play-state: paused !important;
  animation: none !important;
}

[data-reducedmotion="true"] *::before,
[data-reducedmotion="true"] *::after {
  animation: none !important;
}

/* Stop specific animations when reduced motion is on */
[data-reducedmotion="true"] .orb {
  animation: none !important;
  opacity: 0 !important;
}

[data-reducedmotion="true"] .cursor-glow {
  display: none !important;
}

[data-reducedmotion="true"] #particles-canvas {
  display: none !important;
}

[data-reducedmotion="true"] .float-card {
  animation: none !important;
  transform: none !important;
}

[data-reducedmotion="true"] .title-word {
  animation: none !important;
}

[data-reducedmotion="true"] .title-accent {
  animation: none !important;
  background: var(--accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-reducedmotion="true"] .title-glitch {
  display: none !important;
}

[data-reducedmotion="true"] .badge-dot {
  animation: none !important;
}

[data-reducedmotion="true"] .scroll-indicator {
  animation: none !important;
}

[data-reducedmotion="true"] .scroll-dot {
  animation: none !important;
}

[data-reducedmotion="true"] .card-shine {
  animation: none !important;
  display: none;
}

[data-reducedmotion="true"] .badge-icon {
  animation: none !important;
}

[data-reducedmotion="true"] .marquee-content {
  animation: none !important;
  transform: translateX(0) !important;
}

/* Slow down but keep essential bento grid items that need to show content */
[data-reducedmotion="true"] .bento-item {
  transition: none !important;
}

[data-reducedmotion="true"] .bento-item:hover {
  transform: none !important;
}

[data-reducedmotion="true"] .deploy-icon {
  animation: none !important;
}

[data-reducedmotion="true"] .badge-glow {
  animation: none !important;
}

/* Keep code content visible but remove typing animation */
[data-reducedmotion="true"] .code-line {
  opacity: 1 !important;
  animation: none !important;
}

[data-reducedmotion="true"] .code-cursor {
  display: none !important;
}

/* Keep essential transitions for UX but make them instant */
[data-reducedmotion="true"] {
  scroll-behavior: auto !important;
}