/* ============================================================
   Monospace Web — Foundations
   Pure monochrome. JetBrains Mono everywhere. Light + dark.
   ============================================================ */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-400.woff2") format("woff2-variations"),
       url("../fonts/JetBrainsMono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-400italic.woff2") format("woff2-variations"),
       url("../fonts/JetBrainsMono-400italic.woff2") format("woff2");
}

/* ---------- TOKENS: light (default) ---------- */
:root {
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* Surfaces — paper-like off-white, never pure white */
  --bg-0: #f4f1ea;        /* page */
  --bg-1: #ece8de;        /* sunken / code blocks */
  --bg-2: #e2dccd;        /* hover */
  --bg-elev: #fbf9f3;     /* raised cards / popovers */

  /* Foreground — warm near-black, never pure black */
  --fg-0: #16140f;        /* primary text */
  --fg-1: #3a362d;        /* secondary text */
  --fg-2: #6b6657;        /* tertiary / labels */
  --fg-3: #9a9482;        /* placeholder / disabled */

  /* Lines — keep it boring; the grid is the brand */
  --line-1: #16140f;      /* hard rules (1px) */
  --line-2: #c8c1ad;      /* soft rules / dividers */
  --line-3: #d9d3c0;      /* subtlest */

  /* Selection / focus — inverted box */
  --select-bg: #16140f;
  --select-fg: #f4f1ea;

  /* Semantic — desaturated, kept inside the warm grayscale */
  --ok: #16140f;
  --warn: #16140f;
  --err: #16140f;

  /* Sizes — strict mono scale, ratio 1.125 */
  --fs-xxs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;       /* base body */
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 44px;
  --fs-5xl: 60px;

  /* Line-height — tight; mono looks better packed */
  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.55;

  /* Tracking — JetBrains Mono is wide; pull it in slightly at display sizes */
  --tr-tight: -0.02em;
  --tr-norm:   0em;
  --tr-loose:  0.06em;   /* CAPS labels */

  /* Weights */
  --wt-reg: 400;
  --wt-med: 500;
  --wt-bold: 700;

  /* Spacing — 4px base, but the grid people see is the CHARACTER GRID */
  --ch: 1ch;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Corners — square. Use radius only when truly needed. */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;

  /* Borders */
  --bw: 1px;
  --bw-2: 2px;

  /* Elevation — we don't use shadows. We use borders + offset. */
  --shadow-0: none;
  --shadow-1: 2px 2px 0 0 var(--line-1);
  --shadow-2: 4px 4px 0 0 var(--line-1);

  /* Motion */
  --dur-1: 80ms;
  --dur-2: 160ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

/* ---------- TOKENS: dark ---------- */
:root[data-theme="dark"],
.theme-dark {
  --bg-0: #0e0e0c;
  --bg-1: #161614;
  --bg-2: #1f1f1c;
  --bg-elev: #1a1a17;

  --fg-0: #e8e4d6;
  --fg-1: #b8b3a3;
  --fg-2: #807c6f;
  --fg-3: #56534a;

  --line-1: #e8e4d6;
  --line-2: #2e2d29;
  --line-3: #232220;

  --select-bg: #e8e4d6;
  --select-fg: #0e0e0c;

  --shadow-1: 2px 2px 0 0 var(--line-1);
  --shadow-2: 4px 4px 0 0 var(--line-1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-0: #0e0e0c;
    --bg-1: #161614;
    --bg-2: #1f1f1c;
    --bg-elev: #1a1a17;
    --fg-0: #e8e4d6;
    --fg-1: #b8b3a3;
    --fg-2: #807c6f;
    --fg-3: #56534a;
    --line-1: #e8e4d6;
    --line-2: #2e2d29;
    --line-3: #232220;
    --select-bg: #e8e4d6;
    --select-fg: #0e0e0c;
  }
}

/* ---------- Base typography (page-level only) ---------- */
html, body {
  font-family: var(--mono);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg-0);
  background: var(--bg-0);
  font-feature-settings: "calt" 1, "liga" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--select-bg); color: var(--select-fg); }

/* Numeric tabular — for tables and data */
.t-num {
  font-variant-numeric: tabular-nums;
}