@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: normal;

  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "Commit Mono";
  font-weight: 100 700;
  font-style: normal;

  font-display: swap;
  src: url("../fonts/CommitMono-VariableFont.woff2") format("woff2");
}

:root {
  --ink: #0a1a28;
  --ink-raised: #0f2439;
  --ink-raised-2: #132b45;
  --line: #2c4a63;
  --line-soft: hsl(210, 48%, 18%);
  --line-hero-art-grid: hsl(210, 48%, 12%);
  --paper: #eaf2f6;
  --paper-dim: #c3d3de;
  --steel: hsl(208, 20%, 57%);
  --steel-hover: hsl(208, 20%, 57%);
  --accent: #c4a35a;
  --accent-dim: #c4a35a33;
  --hero-art-bg: rgba(0, 0, 0, 0.15);
  --cyan: #5fd0e0;
  --header-bg: rgba(10, 26, 40, 0.88);
  --grid-opacity: 0.35;

  /* Fixed regardless of theme: buttons/track fills always use this exact
     gold, and always pair with a dark navy label, so contrast holds up
     whichever theme the page is in. Only --accent (used for inline text,
     headings, and highlights sitting directly on the page background)
     needs to shift per theme to stay readable. */
  --accent-btn: #c4a35a;
  --accent-text: #13212d;

  --radius: 2px;
  --mono: "Commit Mono", ui-monospace, monospace;
  --sans: "Inter", -apple-system, sans-serif;
  --display: "Inter", -apple-system, sans-serif;

  color-scheme: dark;
}

[data-theme="light"] {
  --ink: #f3f0e7;
  --ink-raised: #eae4d3;
  --ink-raised-2: #e0d8c2;
  --line: #3d5670;
  --line-soft: hsl(46, 23%, 81%);
  --line-hero-art-grid: hsl(46, 23%, 88%);
  --paper: #16232e;
  --paper-dim: #44586a;
  --steel: hsl(207, 18%, 44%);
  --steel-hover: hsl(207, 18%, 55%);
  --accent: #8a6224;
  --accent-dim: #8a622433;
  --hero-art-bg: rgba(255, 255, 255, 0.5);
  --cyan: #0c7a8c;
  --header-bg: rgba(243, 240, 231, 0.88);
  --grid-opacity: 0.5;

  color-scheme: light;
}