/*
	Design tokens for ontherun.pl.

	WHY THIS FILE IS A MIRROR, NOT A SOURCE OF TRUTH
	------------------------------------------------
	The live typography and colour of this site are not authored in CSS. They come
	from the Kirki customizer settings in theme_mods_photography, which Kirki emits
	as an inline <style id="kirki-inline-styles"> block - 48 KB of it, after every
	enqueued stylesheet. Kirki also self-hosts both webfonts from wp-content/fonts/
	and emits their @font-face rules in the same block.

	So this file cannot govern vendor-rendered elements: inline CSS wins on order,
	and any value repeated here would silently drift the moment someone touches the
	customizer. What this file is instead:

	  1. The source of truth for OUR code - lib/home-filmstrip.php, lib/photo-likes.php
	     and anything added later. Those files must not hardcode a colour again.
	  2. A documented mirror of what the database currently renders, so new work
	     matches the site instead of inventing a fourth near-white.

	THE DATABASE IS THE AUTHORITY for every value marked (db). Changing one of those
	means changing it in Appearance > Customize on PRODUCTION - content flows
	prod -> local only, so a local customizer edit is discarded by the next
	`make pull`. The audit in docs/design-system.md lists the ones worth changing.

	Declaring custom properties is safe here: :root variables paint nothing on their
	own, so this file cannot regress vendor rendering.
*/

:root {
	/* ---------------------------------------------------------------- surfaces */

	/* (db) tg_content_bg_color, tg_menu_bg, tg_footer_bg,
	   tg_footer_copyright_bg_color and tg_page_header_bg_color all agree on this
	   one value. It is the site's ground. */
	--otr-surface: #121212;

	/* Sits behind a photo while it loads, so it reads as a hole rather than as the
	   page. Deliberately one step off --otr-surface, not a stray value. */
	--otr-surface-raised: #1a1a1a;

	/* Gradient and badge scrims over photography. Photos supply their own
	   brightness, so overlays are alpha rather than a flat colour. */
	--otr-scrim: rgba(0, 0, 0, 0.72);
	--otr-scrim-soft: rgba(0, 0, 0, 0.5);

	/* ------------------------------------------------------------------- text */

	/* (db) tg_font_color - body copy, menu, anything unqualified. */
	--otr-text: #ffffff;

	/* (db) tg_h1_font_color - every heading level, not just h1. */
	--otr-text-heading: #f4f4f4;

	/* (db) tg_footer_copyright_font_color, tg_sidebar_font_color and
	   tg_label_font_color all agree. Secondary copy: captions, labels, metadata. */
	--otr-text-muted: #c1c1c1;

	/* Muted text laid over a photograph, where an opaque grey would look like a
	   smudge. Same role as --otr-text-muted, different substrate. */
	--otr-text-dim: rgba(255, 255, 255, 0.55);

	/* ----------------------------------------------------------------- accent */

	/* (db) The brand accent, and the most agreed-upon value in the whole config:
	   tg_link_color, tg_menu_active_font_color, tg_sidemenu_font_hover_color,
	   tg_sidebar_title_color, tg_submenu_hover_font_color and
	   tg_button_hover_bg_color are all this pale yellow. */
	--otr-accent: #ffff8a;

	/* (db) tg_hover_link_color. */
	--otr-accent-hover: #ffd0d0;

	/* A like is the one affordance on the site that has to read instantly as
	   "engaged", and the accent yellow cannot carry that against a photograph.
	   Semantic, and intentionally outside the palette above. */
	--otr-like: #e0294a;

	/* --------------------------------------------------------------- typography */

	/* (db) tg_body_font is set to Hind, but Kirki renders body, headings, menus and
	   buttons in Montserrat - Hind reaches exactly one element, #copyright. Both are
	   self-hosted, and Kirki now emits this same fallback stack itself. */
	--otr-font: Montserrat, "Helvetica Neue", Arial, sans-serif;

	/* Weights in live use. 800 appears once, on the main menu (db
	   tg_menu_typography.variant); treat it as that element's quirk, not a step. */
	--otr-weight-normal: 400;
	--otr-weight-bold: 600;

	/* Type scale, smallest first. These are the sizes the site actually renders
	   (measured, not aspirational); the names are roles so new work picks by
	   intent.

	   The heading sizes are small because headings are SET IN CAPS - see tracking
	   below. An uppercase line at 0.22em carries far more width per character than
	   a mixed-case one, so the scale compresses: 22px of caps reads about as loud
	   as the 34px mixed-case title it replaced. Do not raise one of these without
	   also reconsidering the case and the tracking; the three are one decision. */
	--otr-size-label: 12px;   /* eyebrow labels, filmstrip heading, menu, buttons */
	--otr-size-small: 13px;   /* (db) copyright, form labels, like count; also h3-h6 */
	--otr-size-meta: 15px;    /* gallery header metadata */
	--otr-size-body: 16px;    /* body, p, a; also h2 */
	--otr-size-h2: 16px;      /* tg_h2_size */
	--otr-size-h3: 13px;      /* tg_h3_size, and the floor for h4-h6 */
	--otr-size-h1: 22px;      /* tg_h1_size - page and gallery titles */

	/* Tracking. This is the site's governing typographic idea, not a filmstrip
	   quirk: every uppercase run gets air. --otr-tracking-wide is the heading and
	   menu value, --otr-tracking-caps the slightly tighter one for eyebrows and
	   buttons, where the type is already at its smallest.

	   The heading tracking and case are a CODE default, not a (db) value:
	   tg_header_typography is unset in theme_mods_photography, so
	   theme/lib/customizer.lib.php governs it and a deploy can change it. The menu
	   and the page title are (db) and cannot - see docs/design-system.md. */
	--otr-tracking-wide: 0.22em;
	--otr-tracking-caps: 0.18em;
	--otr-tracking-slight: 0.06em;

	/* ---------------------------------------------------------------- motion */

	/* One duration for hover and state changes, so unrelated components do not
	   feel differently weighted. */
	--otr-transition: 0.18s ease;
}