/* LeetCamp styles, built up day by day */

/* ---------- 1. Design tokens ---------- */

:root {
  --bg: #0f0d1a;
  --surface: #14111f;
  --surface-2: #181525;
  --border: #2a2640;
  --text: #ece9ff;
  --muted: #9893b8;
  --accent: #b88cff;
  --g1: #7c83e8;
  --g2: #c77dd0;
  --g3: #f0699f;
  --gradient: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
  --radius: 14px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- 2. Reset & base ---------- */

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

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before { content: "// "; opacity: 0.6; }

.section-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 8px 0 14px;
}

.section-lead { color: var(--muted); max-width: 680px; font-size: 1.05rem; }