/* ============ Variables ============ */
:root {
  --bg: #0a0a0a;
  --bg-alt: #000000;
  --bg-card: #171717;
  --line: rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.28);
  --grid-line: rgba(255,255,255,.06);
  --text: #f5f5f5;
  --text-dim: #a6a6a6;
  --text-mute: #6b6b6b;
  --amber: #ffffff;
  --amber-dim: rgba(255,255,255,.15);
  --on-amber: #0a0a0a;
  --gh-0: rgba(255,255,255,.06);
  --gh-1: rgba(255,255,255,.25);
  --gh-2: rgba(255,255,255,.45);
  --gh-3: rgba(255,255,255,.7);
  --gh-4: #ffffff;
  --shadow: 0 24px 48px -18px rgba(0,0,0,.75);
  --vignette: rgba(0,0,0,.45);
  --radius-sm: 3px;
  --radius: 6px;
  --container: 1180px;
  --ff-display: 'JetBrains Mono', monospace;
  --ff-body: 'PT Sans', sans-serif;
  --ff-mono: 'JetBrains Mono', monospace;
  --transition: .2s ease;
}
[data-theme="light"] {
  --bg: #ffffff;
  --bg-alt: #efefef;
  --bg-card: #fafafa;
  --line: rgba(0,0,0,.14);
  --line-strong: rgba(0,0,0,.26);
  --grid-line: rgba(0,0,0,.07);
  --text: #0a0a0a;
  --text-dim: #4d4d4d;
  --text-mute: #838383;
  --amber: #0a0a0a;
  --amber-dim: rgba(0,0,0,.1);
  --on-amber: #ffffff;
  --gh-0: rgba(0,0,0,.05);
  --gh-1: rgba(0,0,0,.22);
  --gh-2: rgba(0,0,0,.42);
  --gh-3: rgba(0,0,0,.65);
  --gh-4: #0a0a0a;
  --shadow: 0 24px 48px -18px rgba(0,0,0,.14);
  --vignette: rgba(0,0,0,.06);
}