/*
 * Jamie's sites: the type, frame and site colours they share.
 *
 * Canonical here (shared/tokens.css, with the fonts in shared/fonts/). A site
 * vendors a copy of this file and the fonts beside it, the way it vendors
 * sites.json, and keeps its own look on top: Weekly Thing its W mark, Thingy
 * its Archivo costume, the blog its black and white. Every name starts --jt-
 * so it can't meet a site's own tokens (Thingy's Tailwind owns --color-*).
 *
 * Taken from the blog's design/tokens.css on 2026-10-21 (the v2 design, R1-B
 * type and the R0-1d frame), because the blog is the one Jamie wants the
 * others to read like: "font size is a thing to get aligned" (2026-10-21).
 * Measured then, Inter 19px has a 10.4px x-height; the other sites' text sat
 * at 8.2 to 8.7px, the Weekly Thing archive at 6.8px.
 *
 * Fonts: Inter and Inter Tight variable woff2, Fontsource 5.3.0, OFL
 * (fonts/OFL-*.txt). Paths are relative to this file.
 *
 * Colours. Each site has a fill, a text colour for links and small text on
 * white, and a soft card ground. Weekly Thing blue and Thingy tangerine are
 * the blog's. Another Thing (crimson) and Things I've built (green) are new
 * on 2026-10-21 (Jamie agreed: Another Thing off the orange-red it shared
 * with Thingy, the xyz blue it shared with Weekly Thing to green), and every
 * site moved to them on 2026-10-22, the strip contract in the domain
 * AGENTS.md included.
 *
 * Contrast (WCAG), text on white / on the strip #f3f3f5:
 *   weekly #1a5eb6 6.3 / 5.7     another #b3123f 6.8 / 6.2
 *   thingy #b5461a 5.5 / 4.9     xyz     #1d7348 5.8 / 5.3
 *   white on the weekly fill 4.9, on another 6.8, on xyz 5.8;
 *   navy #1b2540 on the tangerine fill 4.6.
 * Dark, text on #131316 / on the dark strip #1e1e23:
 *   weekly #78acf2 7.9 / 7.1     another #f58aa3 8.0 / 7.2
 *   thingy #f3a274 9.0 / 8.1     xyz     #74d3a0 10.2 / 9.1
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"), url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-italic.woff2") format("woff2-variations"), url("fonts/inter-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext-wght-italic.woff2") format("woff2-variations"), url("fonts/inter-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-tight-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-tight-latin-ext-wght-normal.woff2") format("woff2-variations"), url("fonts/inter-tight-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Type */
  --jt-font-heading: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --jt-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --jt-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --jt-size-base: 1.1875rem;     /* 19px: body text */
  --jt-line-height: 1.6;
  --jt-size-hero: 3.375rem;      /* 54px: a home page's greeting */
  --jt-size-h1: 3.5rem;          /* 56px: a page's title */
  --jt-size-title: 2.25rem;      /* 36px: titles in a list */
  --jt-size-h2: 1.875rem;        /* 30px */
  --jt-size-h3: 1.375rem;        /* 22px */
  --jt-size-ui: 1.0625rem;       /* 17px: nav, buttons */
  --jt-size-small: 1rem;         /* 16px: blurbs, footer */
  --jt-size-meta: 0.9375rem;     /* 15px: dates */
  --jt-size-label: 0.875rem;     /* 14px: kickers, the strip; nothing smaller */
  --jt-weight-heading: 800;
  --jt-weight-strong: 600;
  --jt-tracking-heading: -0.02em;
  --jt-tracking-label: 0.06em;
  --jt-measure: 45rem;           /* 720px: one column of reading */

  /* Frame: strip, header, content and footer share one width */
  --jt-frame: 70rem;             /* 1120px */
  --jt-gutter: 1.5rem;           /* 24px each side */

  /* The shared neutrals (the strip's and the blog's) */
  --jt-ground: #ffffff;
  --jt-ink: #16161a;
  --jt-text-soft: #3d3d47;
  --jt-text-muted: #5a5a66;
  --jt-strip: #f3f3f5;

  /* The sites */
  --jt-weekly: #1f6fd6;
  --jt-weekly-text: #1a5eb6;
  --jt-weekly-soft: #edf3fc;
  --jt-another: #b3123f;
  --jt-another-text: #b3123f;
  --jt-another-soft: #fbeef2;
  --jt-thingy: #e8672a;
  --jt-thingy-on: #1b2540;       /* text on the tangerine fill */
  --jt-thingy-text: #b5461a;
  --jt-thingy-soft: #fcede5;
  --jt-xyz: #1d7348;
  --jt-xyz-text: #1d7348;
  --jt-xyz-soft: #ebf5ef;
  --jt-on-fill: #ffffff;         /* text on the weekly, another and xyz fills */
}

/* Dark, for the sites that have it: neutrals inverted, site colours
   lightened for text and darkened for card grounds; fills stay. */
@media (prefers-color-scheme: dark) {
  :root {
    --jt-ground: #131316;
    --jt-ink: #ececf0;
    --jt-text-soft: #c4c4cc;
    --jt-text-muted: #9d9daa;
    --jt-strip: #1e1e23;
    --jt-weekly-text: #78acf2;
    --jt-weekly-soft: #162338;
    --jt-another-text: #f58aa3;
    --jt-another-soft: #2b1820;
    --jt-thingy-text: #f3a274;
    --jt-thingy-soft: #2c1f17;
    --jt-xyz-text: #74d3a0;
    --jt-xyz-soft: #14261c;
  }
}

/* Phones */
@media (max-width: 40rem) {
  :root {
    --jt-size-base: 1.125rem;    /* 18px */
    --jt-size-hero: 2.375rem;    /* 38px */
    --jt-size-h1: 2.375rem;
    --jt-size-title: 1.75rem;
    --jt-size-h2: 1.5rem;
    --jt-size-meta: 0.875rem;
    --jt-gutter: 1rem;           /* 16px */
  }
}