:root {
  color-scheme: dark;
  /* base / ink */
  --ink-900:#06080e; --ink-800:#0b0f1a; --ink-700:#121829; --ink-600:#1a2238;

  /* primary cyan ramp */
  --cyan-300:#7df0ff; --cyan-400:#2ff0fa; --cyan-500:#22e6f0; --cyan-600:#15c8d8;
  --primary:var(--cyan-500);
  --primary-fill:linear-gradient(180deg,#2ff0fa,#15c8d8);
  --on-primary:#04141a;            /* ink text on cyan — passes AA */

  /* accents (single canonical values — replaces #5c47ff / #82aaff / #bd93f9) */
  --violet:#8b7cff; --magenta:#ff79c6;

  /* semantic */
  --success:#3ddc97; --warning:#ffb86c; --error:#ff5a6e;

  /* text */
  --text:#eef3fb; --text-muted:#9aa7bd; --text-dim:#5d6b82;

  /* surfaces / borders (replace the dozens of one-off white-alphas) */
  --surface-1:rgba(255,255,255,0.03); --surface-2:rgba(255,255,255,0.05);
  --border-hairline:rgba(255,255,255,0.08); --border-emphasis:rgba(255,255,255,0.16);

  /* glass */
  --glass-bg:rgba(255,255,255,0.05); --glass-blur:14px;
  --glass-hl:rgba(255,255,255,0.22);

  /* radius scale (replaces 6/8/10/12/14/16/18/26/30/32px sprawl) */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-full:999px;

  /* type */
  --font-ui:'Outfit',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  /* Sub-site / legacy variables compatibility map */
  --lair404-primary: var(--primary);
  --lair404-bg: var(--ink-900);
  --lair404-text: var(--text);
  --lair404-text-muted: var(--text-muted);
  --lair404-text-dim: var(--text-dim);
  --lair404-border: var(--border-hairline);
  --lair404-border-hover: var(--border-emphasis);

  /* Glass tokens mapping */
  --lair404-glass-bg: var(--glass-bg);
  --lair404-glass-bg-hover: rgba(255, 255, 255, 0.08);
  --lair404-glass-blur: var(--glass-blur);
  --lair404-glass-border: var(--border-hairline);
  --lair404-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

  /* Gradients */
  --lair404-gradient-mesh: radial-gradient(ellipse at 20% 0%, rgba(34, 230, 240, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(139, 124, 255, 0.1) 0%, transparent 50%);

  --error-color: var(--error);
  --success-color: var(--success);
  --font-base: var(--font-ui);
  --accent-cyan: var(--primary);
  --glass-border: var(--border-hairline);

  --bg-base: var(--ink-900);
  --bg-panel: var(--surface-1);
  --bg-panel-glow: var(--surface-2);
  --bg-1: var(--ink-900);
  --bg-2: var(--ink-800);
  --panel: var(--surface-1);
  --panel-soft: var(--surface-2);
  --line: var(--border-hairline);
  --line-dim: var(--border-hairline);
  --text-main: var(--text);
  --text-dim-legacy: var(--text-dim);
  --muted: var(--text-muted);
  --cyan: var(--primary);
  --purple: var(--violet);
  --blue: var(--violet);
  --gold: var(--warning);
  --green: var(--success);
  --orange: var(--warning);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  --font-serif: var(--font-ui);
}

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

body {
  background-color: var(--lair404-bg);
  background-image:
    linear-gradient(to bottom, rgba(6, 11, 19, 0.4), rgba(6, 11, 19, 0.9)),
    url('/hologram-bg-premium-v2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--lair404-text);
  font-family: var(--font-base);
  min-height: 100vh;
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 16%, rgba(92, 71, 255, 0.18), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(0, 242, 254, 0.16), transparent 26%),
    radial-gradient(circle at 72% 88%, rgba(255, 116, 197, 0.16), transparent 28%);
  opacity: 0.85;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 2rem;
  max-width: 1600px;
  margin: 0 auto;
}

.noise-overlay::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.015'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 100;
}