/* tokens — the site's decisions, in one file.

   Every choice (colour, type, space, size) lives here and no other file invents
   a value of its own: when the portfolio's typography and spacing arrive, they
   land here too, as --font-*, --text-*, --space-*, --measure. */

:root {
  /* Colours. Paper 254, ink 7. */
  --paper: #fefefe;
  --ink: #070707;

  /* Type. These family names are the ones site/src/estilos/fonts.css declares,
     so the file it points at and the name used here are always the same pair. */
  --font-ui: 'Bitroad', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Bitroad Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* The piece's colour hook: changing this repaints the whole drawing without
     touching site/src/mask/mask.css. Without it the piece falls back to its own
     black — it is self-sufficient on purpose. */
  --mask-ink: var(--ink);

  /* What the piece settles into once it steps behind the site: the watermark. */
  --mask-ink-faded: #d4d4d4;

  /* Text and rhythm. The measure is how wide a line of prose wants to be; the
     step is the one gap blocks use, so nothing invents a margin of its own. */
  --measure: 62ch;
  --step: 32px;

  /* How much of the viewport the navigation takes — and therefore how much the
     page has left for everything else. Two numbers, because there are two
     layouts: a column on the left costs width, a navbar at the top costs height.
     The navigation's other numbers (bar height, label size, reach) live in
     site/src/estilos/aside.css. */
  --bar-w: 390px;
  --bar-h: 0px;

  /* The piece's stage: the box the site hands it. The piece measures this
     element and draws inside it, so this single number decides how big the
     drawing is. The vmin cap is only there to keep it from cropping on a small
     screen. */
  --frame: min(450px, 88vmin);

  /* The fallback cell, so the box already has the right shape before the script
     runs: the stage divided by the mask's 84 columns. */
  --cell: calc(var(--frame) / 84);
}

/* Narrow. The column becomes a navbar: it takes no width at all, and it costs
   56px of height at the top instead.

   The breakpoint is 900px and not 720, because it is not about phones — it is
   about arithmetic. The rail is 390px and the piece wants 450: below 900 there is
   no longer room for both without one of them eating the other. A 702px window is
   where this was found, and it is a perfectly ordinary window size. */
@media (max-width: 900px) {
  :root {
    --bar-w: 0px;
    /* The navbar is a row of lines stepping down to the right: one line, plus a
       step for each item after the first (56 + 12 x 2 with three items). This is the
       value before the script runs — site/src/scripts/aside.js measures the row and
       publishes the exact one. */
    --bar-h: 80px;
  }
}