/* ═══════════════════════════════════════════════════════
   SVERSE · design tokens
   Source of truth: spec/06-page-design.md §1
   Never hardcode a hex value outside this file.
   ═══════════════════════════════════════════════════════ */

:root {
  /* surfaces */
  --bg:        #0a0416;
  --bg-2:      #120a26;
  --panel:     #0f0722;
  --surface:   rgba(255,255,255,0.045);
  --surface-2: rgba(255,255,255,0.08);
  --border:    rgba(255,255,255,0.10);
  --border-2:  rgba(255,255,255,0.18);

  /* text */
  --text:      #f3effc;
  --text-dim:  #a89ec6;

  /* brand */
  --violet:    #7b2ff7;
  --magenta:   #e935c1;
  --pink:      #ff4ecd;
  --cyan:      #3ee6e0;
  --grad: linear-gradient(96deg, #7b2ff7, #e935c1 60%, #ff4ecd);

  /* semantic — see spec/06 §2, these carry meaning */
  --green:     #28c840;   /* verified · live · passed */
  --amber:     #ffbe3d;   /* pending · unverified · blocked */
  --red:       #ff5f57;   /* failed · destructive */
  --tier-t0:   #9aa6ff;

  /* type */
  --font: "Poppins", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* radius */
  --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  /* elevation */
  --e-1: 0 6px 20px rgba(0,0,0,0.30);
  --e-2: 0 16px 40px rgba(0,0,0,0.50);
  --e-3: 0 30px 80px rgba(0,0,0,0.60);
  --glow-pink: 0 0 20px rgba(255,78,205,0.40);

  /* layout */
  --sidebar: 232px;
  --page-max: 1240px;
}

/* spacing scale: 4 8 12 16 20 24 30 40 60 80 — nothing between */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background:
    radial-gradient(900px 520px at 84% -10%, rgba(59,20,120,0.5), transparent 60%),
    var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }
h1,h2,h3,h4,h5 { line-height: 1.2; font-weight: 700; }
::selection { background: var(--magenta); color: #fff; }

/* focus ring — spec/06 §8, never remove without replacement */
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* type scale */
.t-h1    { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.01em; }
.t-h2    { font-size: clamp(1.8rem, 4vw, 2.9rem); font-weight: 700; }
.t-h3    { font-size: 1.14rem; font-weight: 700; }
.t-body  { font-size: 0.93rem; }
.t-small { font-size: 0.82rem; }
.t-micro {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.t-mono  { font-family: var(--mono); font-size: 0.81rem; }
.dim     { color: var(--text-dim); }
.num     { font-variant-numeric: tabular-nums; }

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

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