/*
 * Design tokens — one CSS custom property per decision, always.
 * Every colour/font/spacing value used more than once references one of
 * these variables rather than a hardcoded value duplicated across files.
 * This is what lets a single Customizer colour picker restyle the whole
 * site (see inc/setup.php thinkbridge_customizer_css()).
 */

:root {
  --bg: #faf9f6;
  --surface: #ffffff;
  --ink: #14141a;
  --ink-soft: #57565f;
  --line: #e8e6df;
  --accent: #ff5a36;
  --accent-2: #2b2b6b;
  --accent-ink: #ffffff;

  /*
   * "Band" tokens — a handful of sections (topbar, nav CTA pill, stats
   * bar, CTA banner, footer, service-icon squares) are meant to always
   * read as a punchy near-black band with light text, regardless of
   * theme mode. They used to just reuse --ink/--bg directly, which
   * happened to work in light mode (--ink is dark) but would invert
   * backwards in dark mode (--ink becomes light, turning these into
   * light stripes on a dark page). Decoupled here so dark mode
   * (assets/css/tokens-dark.css) can override just these two without
   * touching --ink/--bg. Values below match --ink/--bg exactly, so
   * light mode looks pixel-identical to before this existed.
   */
  --band-bg: #14141a;
  --band-ink: #faf9f6;

  --radius: 16px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --maxw: 1200px;

  /*
   * Derived shades — color-mix() here is only ever the *default*, used
   * until the page's inline Customizer override (enqueued after this
   * file, see inc/setup.php) replaces these with explicit PHP-computed
   * values. Chaining color-mix() through a *later* CSS variable override
   * does not reliably re-resolve, so don't rely on it beyond this
   * baseline default.
   */
  --accent-tint-50: color-mix(in srgb, var(--accent) 10%, white);
  --accent-hover: color-mix(in srgb, var(--accent) 88%, black);
  --accent-50-alpha: color-mix(in srgb, var(--accent) 50%, transparent);
  --accent-shadow: color-mix(in srgb, var(--accent) 28%, transparent);
}