/* ============================================================
   base.css — reset, tokens, typography, helpers
   ============================================================ */
:root {
  /* palette */
  --bg-0: #06040c;
  --bg-1: #0b0716;
  --bg-2: #110a22;
  --panel: rgba(16, 10, 30, 0.72);
  --panel-2: rgba(24, 14, 42, 0.82);
  --line: rgba(138, 124, 220, 0.28);
  --line-soft: rgba(138, 124, 220, 0.14);

  --violet: #a474ff;
  --violet-bright: #c9a4ff;
  --violet-deep: #6a3fbf;
  --violet-dark: #3a1d6e;
  --ember: #ff9d3c;
  --ember-bright: #ffc06a;
  --ember-deep: #c44a18;
  --gold: #ffcf4a;
  --silver: #cdd4ee;
  --text: #c7c2e0;
  --text-dim: #8a829f;
  --text-faint: #5d5577;
  --online: #48d36a;

  --ff-serif: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --ff-sans: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --ff-body: "Rajdhani", "Segoe UI", system-ui, sans-serif;

  --shadow-panel: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
  --glow-violet: 0 0 18px rgba(164, 116, 255, 0.45);
  --glow-ember: 0 0 22px rgba(255, 130, 40, 0.55);

  --radius: 2px;
  --maxw: 1320px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--ff-body);
  color: var(--text);
  background: var(--bg-0);
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font: inherit; }

/* selection */
::selection { background: var(--violet-deep); color: #fff; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--violet-dark), var(--ember-deep));
  border-radius: 10px;
}

/* typography helpers */
.h-eyebrow {
  font-family: var(--ff-sans);
  text-transform: uppercase;
  letter-spacing: 0.5em;
  font-size: 0.78rem;
  color: var(--violet-bright);
}
.h-panel {
  font-family: var(--ff-serif);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  color: var(--violet-bright);
}
.tagline {
  font-family: var(--ff-serif);
  text-transform: uppercase;
  letter-spacing: 0.42em;
}
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 40px);
}