:root {
  /* --- ATD SIGNATURE SPECTRUM TOKENS --- */
  --atd-cyan: #00f2fe;
  --atd-electric-blue: #4facfe;
  --atd-violet: #7f00ff;
  --atd-magenta: #e100ff;
  
  /* Spectrum Gradient Offsets */
  --grad-hero: linear-gradient(135deg, rgba(0, 242, 254, 0.15), rgba(79, 172, 254, 0.05) 50%, transparent);
  --grad-engines: linear-gradient(135deg, rgba(79, 172, 254, 0.15), rgba(127, 0, 255, 0.15));
  --grad-intelligence: linear-gradient(135deg, rgba(127, 0, 255, 0.2), rgba(225, 0, 255, 0.15));
  --grad-signature: linear-gradient(90deg, var(--atd-cyan), var(--atd-electric-blue), var(--atd-violet), var(--atd-magenta));

  /* --- LAYERED DARK SURFACES --- */
  --bg-deep-charcoal: #0b0d12;
  --bg-near-black-navy: #07090e;
  --bg-dark-blue: #090e17;
  --bg-deep-violet: #0f0a18;
  --surface-glass: rgba(15, 20, 30, 0.65);
  --surface-border: rgba(255, 255, 255, 0.08);
  --surface-border-active: rgba(0, 242, 254, 0.4);

  /* --- TYPOGRAPHY & ELEVATION --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', Fira Code, monospace;
  --glow-subtle: 0 0 20px rgba(0, 242, 254, 0.15);
  --glow-violet: 0 0 25px rgba(127, 0, 255, 0.25);
  --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Body Surface Transition */
body {
  background-color: var(--bg-near-black-navy);
  color: #e2e8f0;
  font-family: var(--font-sans);
  margin: 0;
  overflow-x: hidden;
  transition: background-color 0.8s var(--transition-smooth);
}

/* Scroll Journey Theme Application */
body[data-active-theme="hero"] { background-color: var(--bg-near-black-navy); }
body[data-active-theme="approach"] { background-color: var(--bg-deep-charcoal); }
body[data-active-theme="platform"] { background-color: var(--bg-dark-blue); }
body[data-active-theme="engines"] { background-color: var(--bg-deep-violet); }

/* Glass Surface Component */
.atd-glass-panel {
  background: var(--surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.atd-glass-panel:hover {
  border-color: var(--surface-border-active);
  box-shadow: var(--glow-subtle);
}