/* GENERATED by www.thingelstad.com/scripts/sync-shared.sh from design/tokens.css. Do not edit here. */
/*
 * www.thingelstad.com design tokens: the source of truth.
 *
 * The v2 design, settled in the discovery rounds of 2026-10-08 on the canvas
 * https://claude.ai/artifact/VEF9sppJBioJK1Yx1f7fUc (Round 4 is the final
 * review):
 *   - Type R1-B: Inter Tight for headings, Inter for everything else, both
 *     self-hosted (OFL).
 *   - Colour R2-B: the blog is black and white. Colour belongs only to the
 *     Weekly Thing (blue), Another Thing (red) and Thingy (tangerine).
 *   - Layout R0-1d: a main column and a 320px rail on one shared grid, so the
 *     sites strip, header, content and footer all line up.
 *
 * scripts/sync-shared.sh copies this file to thing-hugo/static/assets/css/tokens.css.
 * Never edit the synced copy. head.html reads --theme-color below for
 * <meta name="theme-color">.
 *
 * Contrast (WCAG AA, all on white unless noted): muted 6.8:1 (6.1 on strip),
 * WT text 6.3:1, AT 5.2:1, Thingy text 5.5:1; white on WT blue 4.9:1, navy on
 * tangerine 4.6:1. The raw WT blue and tangerine are fills, never small text
 * on white.
 *
 * White is the ground (Jamie: "particularly with images involved"); dark mode
 * follows the reader's system setting (Jamie, 2026-10-20: "We do need dark
 * mode as well"). Dark contrast on #131316: ink 15.7:1, muted 6.9:1, WT text
 * 7.9:1, AT text 7.7:1, Thingy text 9.0:1, each still AA on its soft card.
 * The fills keep their light values, so the site colours read the same.
 */

:root {
  color-scheme: light dark;
  --theme-color: #ffffff;
  --theme-color-dark: #131316;

  /* Black and white */
  --color-bg: #ffffff;
  --color-ink: #16161a;          /* text, links, buttons */
  --color-text: var(--color-ink);
  --color-text-soft: #3d3d47;    /* blurbs, intros */
  --color-text-muted: #5a5a66;   /* dates, labels */
  --color-quote: #2a2a33;        /* blockquote text */
  --color-quote-bar: #d6d6de;
  --color-strip: #f3f3f5;        /* sites strip, footer, chips, quiet buttons */
  --color-mark: #e4e4ea;         /* search hits */
  --color-selection: #dcdce4;

  /* The other sites: the only colour on the blog */
  --color-wt: #1f6fd6;           /* fill */
  --color-wt-text: #1a5eb6;      /* text and links on white */
  --color-wt-soft: #edf3fc;      /* card ground */
  --color-at: #c63a20;           /* fill, and text on white */
  --color-at-text: #c63a20;
  --color-at-soft: #fbf1ef;
  --color-thingy: #e8672a;       /* fill */
  --color-thingy-on: #1b2540;    /* text on the tangerine fill */
  --color-thingy-text: #b5461a;  /* text and links on white */
  --color-thingy-soft: #fcede5;
  --color-on-fill: #ffffff;      /* text on the WT and AT fills */

  /* Type */
  --font-heading: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-size-base: 1.1875rem;   /* 19px body */
  --line-height-base: 1.6;
  --font-size-lead: 1.15em;      /* a micropost's text in the stream */
  --font-size-brief: 1.75rem;    /* 28px: a short micropost with no photo */
  --font-size-hero: 3.375rem;    /* 54px: home greeting */
  --font-size-h1: 3.5rem;        /* 56px: titled post */
  --font-size-title: 2.25rem;    /* 36px: titles in the stream */
  --font-size-h2: 1.875rem;      /* 30px: headings inside a post, cards */
  --font-size-h3: 1.375rem;      /* 22px: rail headings */
  --font-size-site-name: 2.125rem; /* 34px home, see --font-size-site-name-compact */
  --font-size-site-name-compact: 1.5rem; /* 24px everywhere else */
  --font-size-ui: 1.0625rem;     /* 17px: nav, buttons */
  --font-size-small: 1rem;       /* 16px: rail blurbs, footer */
  --font-size-meta: 0.9375rem;   /* 15px: dates */
  --font-size-label: 0.875rem;   /* 14px: kickers, strip */
  --weight-heading: 800;
  --weight-strong: 600;
  --tracking-heading: -0.02em;
  --tracking-label: 0.06em;

  /* Grid: one frame for strip, header, content and footer */
  --page-max: 70rem;             /* 1120px */
  --gutter: 1.5rem;              /* 24px side padding */
  --rail: 20rem;                 /* 320px */
  --col-gap: 5rem;               /* 80px between main and rail */
  --row-gap: 3rem;               /* 48px when the rail drops below */
  --measure: 45rem;              /* 720px: a post on its own page */
  --stack-posts: 4rem;           /* 64px between posts in the stream */

  /* Space scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Radius */
  --radius-sm: 6px;              /* thumbnails */
  --radius-md: 8px;              /* photos, buttons, inputs */
  --radius-lg: 12px;             /* cards */
  --radius-pill: 999px;          /* chips */

  /* Touch */
  --target-min: 44px;
  --target-field: 48px;
}

/* Dark: the same black-and-white blog, inverted; site colours lightened for
   text and darkened for card grounds. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #131316;
    --color-ink: #ececf0;
    --color-text-soft: #c4c4cc;
    --color-text-muted: #9d9daa;
    --color-quote: #d6d6de;
    --color-quote-bar: #4a4a55;
    --color-strip: #1e1e23;
    --color-mark: #34343d;
    --color-selection: #3d3d47;

    --color-wt-text: #78acf2;
    --color-wt-soft: #162338;
    --color-at-text: #f08c76;
    --color-at-soft: #2b1a17;
    --color-thingy-text: #f3a274;
    --color-thingy-soft: #2c1f17;
  }
}

/* Phones: the R4 phone board */
@media (max-width: 40rem) {
  :root {
    --font-size-base: 1.125rem;  /* 18px */
    --font-size-brief: 1.5rem;
    --font-size-hero: 2.375rem;  /* 38px */
    --font-size-h1: 2.375rem;
    --font-size-title: 1.75rem;
    --font-size-h2: 1.5rem;
    --font-size-site-name: 1.5625rem; /* 25px */
    --font-size-site-name-compact: 1.375rem;
    --font-size-meta: 0.875rem;
    --gutter: 1rem;              /* 16px */
    --stack-posts: 3.5rem;       /* 56px */
  }
}