:root {
  /* Base surfaces */
  --bg-deep: #07070c;
  --bg-surface: #0e0e16;
  --bg-card: #13131f;
  --bg-card-hover: #181826;
  --bg-elevated: #1a1a28;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-neon: rgba(6, 182, 212, 0.35);

  /* Text — contrast tuned for WCAG AA on --bg-deep */
  --text-primary: #ececf2;
  --text-secondary: #a8acbe;
  --text-muted: #71748a;

  /* Accent system — overridable per section.
     Default = cyan. Sections override via --accent on .section. */
  --accent: #06b6d4;
  --accent-bright: #22d3ee;
  --accent-dim: rgba(6, 182, 212, 0.14);
  --accent-rgb: 6, 182, 212;
  --gradient-accent: linear-gradient(135deg, var(--accent), var(--neon-purple));

  /* Neon palette (full set, used for icons/badges/donut) */
  --neon-cyan: #06b6d4;
  --neon-cyan-bright: #22d3ee;
  --neon-cyan-dim: rgba(6, 182, 212, 0.14);
  --neon-purple: #8b5cf6;
  --neon-purple-bright: #a78bfa;
  --neon-purple-dim: rgba(139, 92, 246, 0.14);
  --neon-gold: #f59e0b;
  --neon-gold-bright: #fbbf24;
  --neon-gold-dim: rgba(245, 158, 11, 0.14);
  --neon-green: #10b981;
  --neon-green-bright: #34d399;
  --neon-green-dim: rgba(16, 185, 129, 0.14);
  --neon-pink: #ec4899;
  --neon-pink-dim: rgba(236, 72, 153, 0.14);
  --neon-indigo: #6366f1;
  --neon-indigo-dim: rgba(99, 102, 241, 0.14);

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #06b6d4, #8b5cf6);
  --gradient-card: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(139, 92, 246, 0.08));
  --gradient-border: linear-gradient(135deg, #06b6d4, #8b5cf6);
  --gradient-text: linear-gradient(120deg, #22d3ee 0%, #a78bfa 60%, #22d3ee 100%);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Fonts */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Shadows */
  --shadow-neon-cyan: 0 0 24px rgba(6, 182, 212, 0.18), 0 0 1px rgba(6, 182, 212, 0.4);
  --shadow-neon-purple: 0 0 24px rgba(139, 92, 246, 0.18), 0 0 1px rgba(139, 92, 246, 0.4);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 40px -12px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 60px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(var(--accent-rgb), 0.2);

  /* Focus ring — visible on dark surfaces, AA-compliant */
  --focus-ring: 0 0 0 2px var(--bg-deep), 0 0 0 4px var(--accent-bright);

  /* Easings */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);

  /* Durations */
  --transition-fast: 160ms var(--ease-out-quint);
  --transition-base: 320ms var(--ease-out-quint);
  --transition-slow: 600ms var(--ease-out-expo);

  /* Layout */
  --container-max: 1120px;
  --container-wide: 1320px;
  --container-narrow: 760px;
  --header-height: 64px;

  /* Section spacing */
  --section-pad-y: 96px;
  --section-pad-y-tight: 64px;
}

/* Per-section accent overrides.
   Apply .section--accent-* to a <section> to recolor its
   accent-line, section-header dot, hover glows, etc. */
.section--accent-cyan {
  --accent: var(--neon-cyan);
  --accent-bright: var(--neon-cyan-bright);
  --accent-dim: var(--neon-cyan-dim);
  --accent-rgb: 6, 182, 212;
}

.section--accent-purple {
  --accent: var(--neon-purple);
  --accent-bright: var(--neon-purple-bright);
  --accent-dim: var(--neon-purple-dim);
  --accent-rgb: 139, 92, 246;
}

.section--accent-gold {
  --accent: var(--neon-gold);
  --accent-bright: var(--neon-gold-bright);
  --accent-dim: var(--neon-gold-dim);
  --accent-rgb: 245, 158, 11;
}

.section--accent-green {
  --accent: var(--neon-green);
  --accent-bright: var(--neon-green-bright);
  --accent-dim: var(--neon-green-dim);
  --accent-rgb: 16, 185, 129;
}

.section--accent-pink {
  --accent: var(--neon-pink);
  --accent-bright: #f472b6;
  --accent-dim: var(--neon-pink-dim);
  --accent-rgb: 236, 72, 153;
}

.section--accent-indigo {
  --accent: var(--neon-indigo);
  --accent-bright: #818cf8;
  --accent-dim: var(--neon-indigo-dim);
  --accent-rgb: 99, 102, 241;
}