/* Design tokens: every color, font, size, space and radius the theme uses.
   Values from the approved mockup (reports/design/mockup-classic.html, Oct 10 2026): the live
   site's look, cleaned up. Single light theme. Contrast ratios are against the background each
   color is used on; every text pair meets WCAG 2.2 AA (see reports/design/design-pass-1.md). */
:root {
	/* color */
	--tb-color-bg: #ffffff;            /* page */
	--tb-color-surface: #f2f2f2;       /* sidebar, fact box */
	--tb-color-text: #333333;          /* headings, 12.6:1 on bg */
	--tb-color-body: #585151;          /* running text, 7.7:1 on bg (live site value) */
	--tb-color-muted: #6b6464;         /* captions, 5.8:1 on bg, 5.2:1 on surface */
	--tb-color-border: #dcdcdc;        /* dividers and photo frames (decorative) */
	--tb-color-border-strong: #8c8c8c; /* outlines of controls (search box, sort buttons): 3.4:1 on bg, WCAG 1.4.11 */
	--tb-color-accent: #cc0000;        /* menu bar, tile captions, links, buttons; 5.9:1 with white, 5.3:1 on surface. Live used #fe0000 (4.0:1 with white, fails AA) */
	--tb-color-accent-hover: #990000;  /* 8.9:1 with white */
	--tb-color-on-accent: #ffffff;
	--tb-color-header-bg: #fbfbfb;     /* logo bar */
	--tb-color-title-bg: #23201f;      /* page title band (live uses a crowd photo) */
	--tb-color-title-text: #ffffff;    /* 16.2:1 on title bg */
	--tb-color-footer-bg: #eaeaea;
	--tb-color-focus: #1a5fb4;         /* focus ring on light backgrounds, 6.3:1 on bg */
	--tb-color-focus-on-dark: #ffffff; /* focus ring on the red menu bar and the title band */

	/* type (self-hosted: assets/css/fonts.css) */
	--tb-font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
	--tb-font-heading: "Oswald", "Arial Narrow", Impact, sans-serif;
	--tb-font-nav: "Play", "Trebuchet MS", sans-serif;
	--tb-font-ui: var(--tb-font-body);
	--tb-font-size-base: 1.0625rem;    /* 17px, live value */
	--tb-font-size-xs: 0.8125rem;
	--tb-font-size-sm: 0.9375rem;
	--tb-font-size-lg: 1.25rem;
	--tb-font-size-xl: 1.75rem;
	--tb-font-size-2xl: 2rem;
	--tb-line-height: 1.7;
	--tb-line-height-tight: 1.25;

	/* space */
	--tb-space-1: 0.25rem;
	--tb-space-2: 0.5rem;
	--tb-space-3: 0.75rem;
	--tb-space-4: 1rem;
	--tb-space-5: 1.5rem;
	--tb-space-6: 2rem;
	--tb-space-7: 3rem;

	/* shape and layout */
	--tb-wrap: 64rem;                  /* 1024px, live value */
	--tb-gutter: 16px;
	--tb-measure: 46rem;
	--tb-tile-cols: 3;
	--tb-sidebar: 17.5rem;
	--tb-radius: 3px;
	--tb-radius-sm: 3px;
	--tb-focus-ring: 3px solid var(--tb-color-focus);
}