/*
 * Design tokens – the single place to change the site's look.
 *
 * Every color and font used anywhere on the site is defined here as a
 * CSS custom property. Component styles (main.css) only ever reference
 * these tokens, never raw values.
 *
 * The ONE exception: --accent is per-case, not global. Each case page
 * sets it inline on <body> (style="--accent:#8F2106"), eventually
 * derived from that case's hero image. The value below is only a
 * fallback for pages that don't set one. Everything accent-tinted
 * (--accent-soft) is derived from --accent automatically via
 * color-mix(), so a case only ever needs to supply the one value.
 */

:root {
  /* ---- typeface ---- */
  --font-sans: 'Jost', Arial, sans-serif; /* the only font family site-wide */

  /* Jost ships as a single variable font (weight 100–900), so every role
     is just a number here – change one line to reweight the whole site. */
  --weight-heading: 340;        /* h1, h2, quotes */
  --weight-heading-strong: 480; /* wordmark */
  --weight-label: 600;          /* eyebrows, captions, tags */
  --weight-ui: 500;             /* nav links, link-card titles */

  /* ---- neutral palette ---- */
  --paper: #fff;          /* page background */
  --paper-raised: #f7f7f2; /* panels: mobile menu, link cards */
  --ink: #16160f;         /* primary text */
  --ink-soft: #4c4b43;    /* secondary text */
  --stone: #8a8878;       /* labels, captions, muted UI */
  --line: #cfcdbd;        /* borders, dividers */

  /* ---- over-image text (hero caption sits on a dark gradient) ---- */
  --hero-text: #f4f2ea;
  --hero-text-soft: #d9d6c8;

  /* ---- per-case accent (fallback only – cases set --accent inline) ---- */
  --accent: #8f2106;
  /* light tint of the accent, used for hover fills. Derived – do not set per case. */
  --accent-soft: color-mix(in oklab, var(--accent) 12%, var(--paper));

  /* ---- shared layout values ---- */
  --gutter: clamp(1.25rem, 4vw, 3rem); /* horizontal page padding */
  --measure: 46rem;                    /* case body column width */
  /* Case body column above the 1220px sidebar-avoidance breakpoint. Shared
     by .case-body and .entry-title so both center the exact same column —
     duplicating this formula per-selector is how they drift apart. */
  --case-measure: clamp(40rem, 100vw - 36.25rem, var(--measure));
}