/* ============================= TOKENS ============================= */
:root {
  --background: #0f0a1a;
  --bg: var(--background);
  --surface1: rgba(30,21,48,0.75);
  --surface1-solid: #1e1530;
  --surface2: #2a1f42;
  --surface3: #372a55;
  --border: #3a2a5e;
  --border-visible: #5b3d94;
  --text1: #e2d9ee;
  --text2: #b3a2cc;
  --text3: #9a88b0;
  --text4: #6b5d82;
  --accent: #d896ff;
  --accent-deep: #7c3aed;
  --accent-subtle: #4c1d95;
  --success: #34d399;
  --success-bg: #064e3b;
  --warning: #fb923c;
  --warning-bg: #7c2d12;
  --error: #f87171;
  --error-bg: #7f1d1d;

  --font-display: "Outfit", sans-serif;
  --font-body: "Outfit", sans-serif;
  --font-mono: "Share Tech Mono", monospace;

  --space-2xs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;

  --radius-control: 12px;
  --radius-component: 16px;
  --radius-container: 24px;
  --radius-pill: 999px;

  --shadow-1: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-2: 0 10px 32px rgba(0,0,0,0.45);
  --shadow-3: 0 20px 56px rgba(0,0,0,0.55);
  --glow-accent: 0 8px 24px rgba(216,150,255,0.35);
}

html[data-theme="light"] {
  --background: #f7f5fa;
  --surface1: #eeebf4;
  --surface2: #dcd8e6;
  --surface3: #c2bcd4;
  --border: #dcd8e6;
  --border-visible: #a49dbd;
  --text1: #221d42;
  --text2: #655e85;
  --text3: #847ca0;
  --text4: #a49dbd;
  --accent: #7c3aed;
  --accent-subtle: #fdf4ff;
  --success: #059669;
  --success-bg: #ecfdf5;
  --warning: #ea580c;
  --warning-bg: #fffbeb;
  --error: #dc2626;
  --error-bg: #fef2f2;
  --shadow-1: 0 1px 3px rgba(15,10,26,0.08);
  --shadow-2: 0 8px 24px rgba(15,10,26,0.12);
  --shadow-3: 0 16px 48px rgba(15,10,26,0.18);
  --glow-accent: 0 8px 24px rgba(124,58,237,0.25);
}

/* ============================= RESET ============================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--background);
  color: var(--text1);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ============================= BACKGROUND ============================= */
.bg-layer { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(216,150,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,150,255,0.035) 1px, transparent 1px);
  background-size: 40px 40px;
}
html[data-theme="light"] .grid-bg {
  background-image:
    linear-gradient(rgba(124,58,237,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,0.05) 1px, transparent 1px);
}
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; }
.orb-a { width: 560px; height: 560px; top: -180px; right: -120px;
  background: radial-gradient(circle, rgba(216,150,255,0.32), transparent 68%); }
.orb-b { width: 480px; height: 480px; bottom: -160px; left: -140px;
  background: radial-gradient(circle, rgba(124,58,237,0.28), transparent 68%); }
html[data-theme="light"] .orb { opacity: 0.32; }

/* ============================= PRIDE + SKIP ============================= */
.pride-bar { position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 60; }
.pride-bar i { display: block; height: 100%; }
.pride-bar { background: linear-gradient(90deg,
  #e40303 0%, #e40303 12.5%, #ff8c00 12.5%, #ff8c00 25%,
  #ffed00 25%, #ffed00 37.5%, #008026 37.5%, #008026 50%,
  #004dff 50%, #004dff 62.5%, #750787 62.5%, #750787 75%,
  #d896ff 75%, #d896ff 87.5%, #ff69b4 87.5%, #ff69b4 100%); }

.skip-link {
  position: absolute; left: -9999px; top: 10px; z-index: 100;
  background: var(--accent); color: #0f0a1a; font-family: var(--font-body);
  font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: var(--radius-control);
  text-decoration: none;
}
.skip-link:focus { left: 10px; }
html[data-theme="light"] .skip-link { color: #fff; }
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0.01em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}