/* ==================================================================== *
 * tokens.css — palette, type scale, spacing.
 *
 * This is a set of NOTES, not an application. So the ground is paper and
 * the ink is ink: off-white and near-black, one hue family, nothing
 * tinted for atmosphere. The only colour on the page comes from five
 * highlighter washes, and each one carries a fixed meaning.
 * ==================================================================== */

/* Inter carries everything that is READ. Brutal Milk is a display
   grotesk with tight spacing and a distinctive 'y' and 'g' — excellent
   at 40px in a heading, tiring across four thousand words of prose,
   which is what this site actually asks of a face. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-italic-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Brutal Milk";
  src: url("../fonts/brutalmilk-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrainsmono-var.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched so a font swap does not shove the page around. */
@font-face {
  font-family: "BM Fallback";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  /* ---- paper ------------------------------------------------------ *
   * Off-white, barely warm — the colour of a good notebook page, not of
   * a manila envelope. The earlier palette was a full sepia and it made
   * every page feel like a document about the 1970s.
   * ----------------------------------------------------------------- */
  --paper:        #fbfaf7;
  --card:         #ffffff;
  --recessed:     #f2f1ed;
  --rule:         #e3e1db;
  --rule-strong:  #c4c1b8;
  --shadow-edge:  rgba(24, 23, 21, .10);

  /* ---- ink -------------------------------------------------------- */
  --ink:          #191816;
  --ink-dim:      #4a4842;
  --ink-sub:      #6f6c63;

  /* ---- highlighters ----------------------------------------------- *
   * Pastel, laid over the page with `multiply` so the paper shows
   * through the swipe the way it does under a real marker. The -ink
   * variants are the same hue pushed dark enough to sit ON a swipe of it
   * and still clear 4.5:1.
   * ----------------------------------------------------------------- */
  --sky:          #cadff0;   /* client side          */
  --mint:         #cce7d2;   /* server side          */
  --butter:       #f7e9ab;   /* definition, keyword  */
  --rose:         #f4d6cc;   /* error, RST, trap     */
  --lilac:        #ddd6ef;   /* SCTP                 */

  --sky-ink:      #2b5f80;
  --mint-ink:     #2f6338;
  --butter-ink:   #6d5408;
  --rose-ink:     #8f3d24;
  --lilac-ink:    #524383;

  --hi-blend:     multiply;
  --wash:         30%;
  --wash-strong:  50%;

  /* Texture, deliberately almost nothing. A graph-paper grid across
     every page is somebody else's signature, and on a wall of prose it
     is just noise behind the words. */
  --grain-opacity: 0;
  --grain-blend:   multiply;

  /* ---- type ------------------------------------------------------- */
  /* Two voices, and each one owns a job. Display sets headings, the
     wordmark and nothing else. Text sets everything written. */
  --f-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
            Helvetica, Arial, sans-serif;
  --f-display: "Brutal Milk", "BM Fallback", "Inter", -apple-system,
               BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --f-code: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
            Menlo, Consolas, monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.855rem;
  --t-base: 1.0625rem;      /* 17px — this is a page to read for hours */
  --t-md:   1.1875rem;
  --t-lg:   1.4rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.15rem;
  --t-3xl:  2.6rem;
  --t-4xl:  3.4rem;

  --lh-tight: 1.2;
  --lh-body:  1.72;

  /* ---- frame ------------------------------------------------------ */
  --measure:  38rem;        /* ~70 characters of Inter at 17px */
  --wide:     56rem;        /* figures, code, tables                 */
  --rail-l:   16rem;
  --rail-r:   13rem;
  --bar-h:    3.25rem;
  --gutter:   clamp(1.25rem, 4vw, 3rem);
  --radius:   4px;
  --radius-lg: 8px;

  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4.5rem;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==================================================================== *
 * Night.
 *
 * Near-black, not graphite-brown. The ground gives up its warmth
 * entirely; what survives the flip is the RELATIONSHIP — sky is still
 * the client, mint still the server — so the highlighters keep their hue
 * and trade lightness for depth, and the blend goes to `screen` so a
 * swipe still reads as something laid over the page rather than a hole
 * cut through it.
 * ==================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #0c0c0d;
    --card:        #161617;
    --recessed:    #131314;
    --rule:        #26262a;
    --rule-strong: #3d3d43;
    --shadow-edge: rgba(0, 0, 0, .6);

    --ink:         #eceae5;
    --ink-dim:     #b4b1aa;
    --ink-sub:     #85827b;

    --sky:         #1d3a4e;
    --mint:        #1e3f28;
    --butter:      #453a16;
    --rose:        #4b271d;
    --lilac:       #322a4c;

    --sky-ink:     #97c6e6;
    --mint-ink:    #8fc99a;
    --butter-ink:  #e0c464;
    --rose-ink:    #e5a184;
    --lilac-ink:   #bdb2e2;

    --hi-blend:      screen;
    --wash:          56%;
    --wash-strong:   82%;
    --grain-opacity: 0;
  }
}
:root[data-theme="dark"] {
  --paper:       #0c0c0d;
  --card:        #161617;
  --recessed:    #131314;
  --rule:        #26262a;
  --rule-strong: #3d3d43;
  --shadow-edge: rgba(0, 0, 0, .6);

  --ink:         #eceae5;
  --ink-dim:     #b4b1aa;
  --ink-sub:     #85827b;

  --sky:         #1d3a4e;
  --mint:        #1e3f28;
  --butter:      #453a16;
  --rose:        #4b271d;
  --lilac:       #322a4c;

  --sky-ink:     #97c6e6;
  --mint-ink:    #8fc99a;
  --butter-ink:  #e0c464;
  --rose-ink:    #e5a184;
  --lilac-ink:   #bdb2e2;

  --hi-blend:      screen;
  --wash:          56%;
  --wash-strong:   82%;
  --grain-opacity: 0;
}