@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Share+Tech+Mono&display=swap');

:root {
  /* ── Palette ── */
  --ll-abyss:     #05080f;
  --ll-surface-1: #090d18;
  --ll-surface-2: #0e1525;
  --ll-surface-3: #1a2535;
  --ll-gold:      #c89420;
  --ll-cyan:      #00e8ff;
  --ll-bone:      #ddd8cc;

  /* ── Text ── */
  --text-primary: #c8d8e8;
  --text-muted:   #6b7f93;
  --text-dim:     #3d4f63;

  /* ── Typography ── */
  --font-display: 'Press Start 2P', monospace;
  --font-mono:    'Share Tech Mono', monospace;

  --type-label:   10px;
  --type-read-sm: 13px;
  --type-read:    15px;
  --type-title:   18px;

  /* ── Spacing (4-pt × 3 scale) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 36px;
  --space-7: 56px;
  --space-8: 80px;
  --space-9: 112px;

  /* ── Borders ── */
  --border-hair: 1px;

  /* ── Tracking ── */
  --tracking-wide:  0.12em;
  --tracking-wider: 0.2em;

  /* ── Glow ── */
  --glow-gold: 0 0 24px rgba(200,150,30,.55), 0 0 48px rgba(200,150,30,.2);
  --glow-cyan: 0 0 20px rgba(0,232,255,.5),   0 0 40px rgba(0,232,255,.2);

  /* ── CRT effects (used as CSS backgrounds) ── */
  --scanlines: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.08) 2px,
    rgba(0,0,0,.08) 4px
  );
  --crt-vignette: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.72) 100%);
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--ll-abyss);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--type-read);
  line-height: 1.7;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p { color: #b0c4d8; }