/* Clarity Systems — Crystal Prism theme tokens */
:root{
  --background:#02040a;
  --foreground:#f1f6ff;
  --muted-foreground:#8a99b8;
  --border:rgba(80,140,210,.35);
  --neon-cyan:#00d8ff;
  --crystal-blue:#5cbdff;
  --deep-blue:#1e6fd9;
  --ice-white:#eaf6ff;
  --grid-color:rgba(0,216,255,.055);
  --glow-cyan:0 0 20px rgba(0,216,255,.6),0 0 40px rgba(0,216,255,.3);
  --glow-blue:0 0 20px rgba(92,189,255,.55),0 0 40px rgba(30,111,217,.25);
  --glow-soft:0 0 30px rgba(0,216,255,.15);
}
html,body{color:var(--foreground);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;margin:0;background:#02040a}
body{
  background:
    radial-gradient(ellipse 75% 50% at 50% -10%,rgba(30,111,217,.16),transparent 60%),
    radial-gradient(ellipse 50% 40% at 92% 95%,rgba(255,109,216,.07),transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 30%,rgba(0,216,255,.10),transparent 60%),
    linear-gradient(180deg,#02040a 0%,#04091a 100%);
  background-attachment:fixed;
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(var(--grid-color) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-color) 1px,transparent 1px);
  background-size:56px 56px;
  opacity:.6;
  mask-image:radial-gradient(ellipse 90% 75% at 50% 40%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 40%,#000 40%,transparent 100%);
  animation:grid-pan 22s linear infinite;
}
body > *{position:relative;z-index:1}
h1,h2,h3,h4,.font-display{font-family:Orbitron,Rajdhani,system-ui,sans-serif;letter-spacing:.02em}
a{color:inherit;text-decoration:none}
.text-muted-foreground{color:var(--muted-foreground)}
.text-foreground{color:var(--foreground)}
.border-border{border-color:var(--border)}

.bg-cyber{
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%,rgba(30,111,217,.20),transparent 60%),radial-gradient(ellipse 50% 40% at 90% 90%,rgba(255,109,216,.10),transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 30%,rgba(0,216,255,.14),transparent 60%),
    linear-gradient(180deg,#02040a 0%,#06101e 100%);
}
.bg-grid{
  background-image:
    linear-gradient(var(--grid-color) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-color) 1px,transparent 1px);
  background-size:48px 48px;
}
.bg-gradient-radial{background:radial-gradient(ellipse at top,rgba(0,180,255,.35),transparent 60%)}
.glass{
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(0,216,255,.14);
}
.glass-hover{transition:all .35s ease}
.glass-hover:hover{border-color:rgba(0,216,255,.5);box-shadow:var(--glow-soft),inset 0 1px 0 rgba(255,255,255,.05);transform:translateY(-2px)}
.neon-text-cyan{color:#00d8ff;text-shadow:0 0 12px rgba(0,216,255,.7),0 0 24px rgba(0,216,255,.4)}
/* Magenta tokens repurposed → crystal blue accents (kept for backwards-compat) */
.neon-text-magenta{color:#5cbdff;text-shadow:0 0 12px rgba(92,189,255,.7),0 0 24px rgba(30,111,217,.4)}
.neon-border-cyan{border:1px solid rgba(0,216,255,.6);box-shadow:var(--glow-cyan)}
.gradient-text{background:linear-gradient(135deg,#ffffff 0%,#5cbdff 45%,#00d8ff 75%,#ff6dd8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.scanline::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(0,216,255,.025) 3px,rgba(0,216,255,.025) 4px);pointer-events:none}

@keyframes pulse-glow{0%,100%{box-shadow:0 0 18px rgba(0,216,255,.4),0 0 32px rgba(0,216,255,.2)}50%{box-shadow:0 0 28px rgba(255,109,216,.5),0 0 60px rgba(255,109,216,.25)}}
.animate-pulse-glow{animation:pulse-glow 3.5s ease-in-out infinite}
@keyframes float-slow{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(3deg)}}
.animate-float{animation:float-slow 7s ease-in-out infinite}
@keyframes grid-pan{0%{background-position:0 0}100%{background-position:48px 48px}}
.animate-grid{animation:grid-pan 14s linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.animate-marquee{animation:marquee 30s linear infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}
.animate-pulse{animation:pulse-dot 2s ease-in-out infinite}
@keyframes prism-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.prism-spin{animation:prism-spin 18s linear infinite;transform-origin:center}

.scrollbar-hide::-webkit-scrollbar{display:none}
input,textarea,select{font-family:inherit}
input:focus,textarea:focus{outline:none;border-color:#00d8ff;box-shadow:0 0 0 3px rgba(0,216,255,.15)}

/* Subtle magenta accent */
.neon-text-accent{color:#ff6dd8;text-shadow:0 0 10px rgba(255,109,216,.55),0 0 22px rgba(255,109,216,.3)}
.glow-accent{box-shadow:0 0 18px rgba(255,109,216,.45),0 0 36px rgba(255,109,216,.2)}