/* ============================================
   weeknotes.ohrg.org — the palette, and nothing else

   Every rule this site draws lives in `/_lib/site.css`, shared with
   ohrg.org. What stays here is what the two sites do not share: the fonts
   this one publishes, and the green.

   A rheo manifest allows exactly one `css_stylesheet`, so the shared sheet
   cannot be a second `<link>` — it is `@import`ed below instead. Both
   `@import`s have to come before every other rule in the file, the
   `@font-face` blocks included, or browsers drop them.
   ============================================ */

/* Inter, for headings, for an idea's own title, and for the body. Fetched
   rather than self-hosted, matching rheo.ohrg.org and ohrg.org; Berkeley
   Mono is self-hosted below because it is licensed and not on any CDN. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;400;500;600;700&display=swap');

/* Root-absolute, and it has to be: this sheet publishes at
   `/nest/weeknotes/style.css`, so a relative url would resolve against
   that directory rather than the site root. `site.toml`'s
   `copy = [.., "_lib/*.css"]` is what puts the file at `/_lib/site.css`, and
   it is a copy glob rather than a build hook so that `--dev`'s watch loop
   republishes it too. */
@import url('/_lib/site.css');

/* ============================================
   Berkeley Mono

   Four faces, following rookery.ohrg.org and cftw.ohrg.org. The urls are
   relative to this stylesheet, which publishes at
   `/nest/weeknotes/style.css` — so the files have to end up at
   `/nest/weeknotes/fonts/`, which is what `postbuild.sh` does with what
   `prebuild.sh` fetched. Until one has run, the wordmark and the idea ids
   fall back to the generic `monospace`.
   ============================================ */
@font-face {
  font-family: 'Berkeley Mono';
  src: url('./fonts/BerkeleyMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Berkeley Mono';
  src: url('./fonts/BerkeleyMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Berkeley Mono';
  src: url('./fonts/BerkeleyMono-Oblique.ttf') format('truetype');
  font-weight: 400;
  font-style: oblique;
}

@font-face {
  font-family: 'Berkeley Mono';
  src: url('./fonts/BerkeleyMono-Bold-Oblique.ttf') format('truetype');
  font-weight: 700;
  font-style: oblique;
}

/* ============================================
   The palette

   The full list `/_lib/site.css` reads is documented at the top of that
   file. Every one of them is declared here; none has a fallback there, on
   purpose — a missing token should be a visibly unpainted site rather than a
   silently half-painted one.
   ============================================ */
:root {
  --background-color: #fdfdfd;
  --text-color: #1a1a1a;
  --link-color: #1a1a1a;
  --blockquote-border: #e6e6e6;
  --blockquote-text: #606060;
  --muted: #6b6b6b;
  --accent: #1e7a55;
  --rule: #e6e6e6;
  /* Two families, split by what a thing IS rather than by where it sits —
     see the note at the top of `/_lib/site.css`, which is what acts on the
     split. Berkeley Mono is site furniture and identifiers; Inter is
     everything that is writing, headings and idea titles included. */
  --mono-font: 'Berkeley Mono', monospace;
  --heading-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* The wordmark and idea ids are the same kind of thing — small mono labels
     — so they are the same size, declared once. In `rem`, not `em`: an id
     sits inside headings of two levels and inside a `#window` summary the
     footer has already scaled down, and only a root-relative unit comes out
     the same in all of them. */
  --label-size: 0.85rem;
  /* The hover fill an idea id takes, so the header can take the same one. The
     package injects this value as `--idea-link-color` on its OWN elements,
     from `THEME.link-color` in template.typ — but the header has no
     `.idea-*` ancestor to inherit it from, so it is written once more here.
     Keep the two in step.

     Translucent, and `--accent` above is the same hue solid: one green at two
     strengths. The wash goes behind a link on hover; the solid draws every
     hairline the package and the shared sheet put on the page. */
  --hover-fill: rgba(30, 130, 90, 0.16);
  /* What an OUTBOUND link's underline takes on hover, where an internal one
     takes `--hover-fill` behind it. Read by rookery's own stylesheet for links
     inside an idea, and by the `a[href^="http"]` rule in the shared sheet for
     the prose outside one, so both halves of the site agree. The accent rather
     than the fill: the fill is translucent, and a 2px line drawn in it barely
     shows. */
  --idea-external-color: var(--accent);

  /* Must match the Typst `set text(font, size)` in template.typ — the KP
     justifier measures against these metrics (see that file's comment). */
  --body-font: Inter;
  --font-size: 16pt;
}