/* ============================================================
   AUREN — Autonomous Compute Mesh
   Design tokens extracted from logo + wordmark
   Pure black, chrome→cyan, electric cyan glow, circuit linework
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---- Core palette ---- */
  --bg-0:        #000000;   /* pure black, page base */
  --bg-1:        #05070C;   /* near-black */
  --bg-2:        #090C14;   /* raised surface */
  --surface:     #0B0F18;   /* panel */
  --surface-2:   #10151F;   /* panel raised */
  --surface-3:   #161C28;   /* hover / input */

  /* ---- Cyan / chrome ---- */
  --cyan:        #18E0FF;   /* primary electric cyan */
  --cyan-bright: #5EEBFF;
  --cyan-deep:   #00A8E0;
  --cyan-core:   #8FF4FF;   /* hot core */
  --chrome-hi:   #F2FAFE;   /* chrome highlight (silver) */
  --chrome:      #C6D4DE;   /* chrome mid */
  --chrome-lo:   #6E8494;   /* chrome shadow */

  /* ---- Text ---- */
  --text-0:      #FFFFFF;
  --text-1:      #DCE6EE;
  --text-2:      #9AA9B8;   /* muted */
  --text-3:      #5E6E7E;   /* faint */
  --text-cyan:   #7FE6FF;

  /* ---- Lines / borders ---- */
  --line:        rgba(120,160,190,0.12);
  --line-2:      rgba(120,180,210,0.20);
  --line-cyan:   rgba(24,224,255,0.35);
  --line-bright: rgba(24,224,255,0.6);

  /* ---- Status ---- */
  --green:       #3DF5A6;
  --amber:       #FFC542;
  --red:         #FF5C7A;
  --violet:      #9C7BFF;

  /* ---- Glows ---- */
  --glow-cyan:   0 0 24px rgba(24,224,255,0.45);
  --glow-cyan-sm:0 0 12px rgba(24,224,255,0.35);
  --glow-soft:   0 0 60px rgba(24,200,255,0.18);

  /* ---- Gradients ---- */
  --grad-chrome: linear-gradient(180deg, var(--chrome-hi) 0%, var(--chrome) 38%, var(--chrome-lo) 100%);
  --grad-cyan:   linear-gradient(135deg, var(--cyan-core) 0%, var(--cyan) 45%, var(--cyan-deep) 100%);
  --grad-mixed:  linear-gradient(105deg, var(--chrome-hi) 0%, var(--chrome) 30%, var(--cyan-bright) 70%, var(--cyan) 100%);
  --grad-panel:  linear-gradient(160deg, rgba(22,30,44,0.7) 0%, rgba(9,12,20,0.65) 100%);

  /* ---- Radii ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* ---- Type ---- */
  --font-display: 'Orbitron', sans-serif;
  --font-body:    'Space Grotesk', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ---- Layout ---- */
  --maxw: 1240px;
  --nav-h: 72px;
  --side-w: 248px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgba(24,224,255,0.28); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--cyan-deep), var(--surface-3));
  border-radius: 10px;
  border: 2px solid var(--bg-1);
}
::-webkit-scrollbar-thumb:hover { background: var(--cyan-deep); }

/* ---- Reusable utility classes ---- */
.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }

.text-chrome {
  background: var(--grad-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.text-cyan-grad {
  background: var(--grad-cyan);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.text-mixed {
  background: var(--grad-mixed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-cyan);
}

.panel {
  background: var(--grad-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(8px);
}

/* Circuit-trace corner accents helper */
.glow-border { position: relative; }
.glow-border::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--line-cyan), transparent 40%, transparent 60%, var(--line-cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Keyframes */
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes pulse-glow {
  0%,100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes float-y {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
@keyframes dash-flow {
  to { stroke-dashoffset: -24; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.05ms !important; }
}