:root {
  --void: #0a0c0b;
  --panel: #101312;
  --line: #232826;
  --line-soft: #1a1e1c;
  --bone: #e9e5da;
  --bone-dim: #9a978d;
  --bone-faint: #7d7b72;
  --phosphor: #35e88e;
  --phosphor-dim: #1d8b55;
  --amber: #e8b549;
  --nav-bg: rgba(10,12,11,0.72);
  --scope-stroke: rgba(53,232,142,0.45);
  --scope-glow: rgba(53,232,142,0.5);
  --scope-ghost: rgba(53,232,142,0.14);
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display: 'Bricolage Grotesque', Georgia, serif;
  --content: 760px;
}

[data-theme="light"] {
  --void: #f4f0e6;
  --panel: #ece8de;
  --line: #d8d3c7;
  --line-soft: #e4e0d6;
  --bone: #111210;
  --bone-dim: #4a4840;
  --bone-faint: #696562;
  --phosphor: #0a7a42;
  --phosphor-dim: #0a7a42;
  --amber: #8a6200;
  --nav-bg: rgba(244,240,230,0.78);
  --scope-stroke: rgba(10,122,66,0.5);
  --scope-glow: rgba(10,122,66,0.35);
  --scope-ghost: rgba(10,122,66,0.15);
}

:focus-visible {
  outline: 1px solid var(--phosphor);
  outline-offset: 2px;
}