/*
 * Design tokens.
 *
 * NEVER hardcode a colour anywhere else in this theme. Every colour must be a
 * custom property declared here.
 *
 * That rule is what makes dark/light mode cost ~300 bytes instead of a second
 * stylesheet: the [data-theme="light"] block below only re-declares surfaces,
 * text and borders. Accents stay constant across both modes, so nothing else in
 * the codebase needs to know which theme is active.
 */

:root {
	/* Surfaces — dark is the default, per the omg.xxx / xxxu.net lean */
	--tt-bg-body: #0a0a0f;
	--tt-bg-surface: #14141c;
	--tt-bg-raised: #1d1d28;
	--tt-border: #2a2a38;

	/* Text */
	--tt-text: #f2f2f5;
	--tt-text-muted: #b8b8c8;

	/*
	 * Accents — identical in both modes.
	 *
	 * Four roles, each with ONE job. The references (omg.xxx, xxxu.net) get
	 * their pop from exactly this: a hot primary plus a cool secondary, so
	 * everything isn't shouting in the same colour.
	 *
	 *   accent    hot red      primary actions, active states, brand
	 *   accent-2  orange       gradient partner, hover escalation
	 *   info      cool blue    links, "new" badges, counts — the cool contrast
	 *   live      green        online/free/positive signals
	 */
	--tt-accent: #ff2e4c;
	--tt-accent-2: #ff8a00;
	--tt-info: #3b9dff;
	--tt-live: #22c55e;
	--tt-accent-contrast: #ffffff;

	/*
	 * Pressed/hover state for anything already filled with --tt-accent.
	 *
	 * Needed because those elements have no colour left to escalate to: you
	 * can't swap accent for accent. Declared as a token, not a filter() or an
	 * inline hex, so the whole fleet's hover state moves when a site overrides
	 * its accent from the options page.
	 */
	--tt-accent-dark: #d81638;

	/* The signature gradient. One definition, used by CTAs and the promo bar. */
	--tt-grad: linear-gradient(135deg, var(--tt-accent), var(--tt-accent-2));

	/* Overlay chrome on thumbnails (duration badge etc). Mode-independent —
	   it always sits on top of an image, never on a page surface. */
	--tt-overlay: rgba(0, 0, 0, 0.78);
	--tt-overlay-text: #ffffff;

	/*
	 * Footer band. Deliberately MODE-INDEPENDENT — declared here with the
	 * constants, NOT with the surfaces above, so nobody adds it to the
	 * [data-theme='light'] block by reflex.
	 *
	 * The whole footer paints white text and a white-text logo on this colour.
	 * If it flipped to a light surface in light mode, every one of those would
	 * turn white-on-white. It stays dark in both themes on purpose.
	 *
	 * Replaced the solid --tt-accent-dark band in v0.22.0: the logo artwork
	 * contains the SAME red, so on a red band the word "PORNO" measured 1.01:1
	 * (invisible) and the only way to show the logo at all was a
	 * brightness(0) invert(1) white-out — which flattened the Czech-flag roundel
	 * into a featureless white disc. See .tt-footer in layout.css.
	 */
	--tt-footer-bg: #12121a;

	/*
	 * Partner banner tile. MODE-INDEPENDENT, for the same reason as the footer
	 * band above — do not add it to the [data-theme='light'] block by reflex.
	 *
	 * Partner logos are assets THEY supply and we cannot restyle. Most are drawn
	 * for a white page, so their wordmarks are dark: Localxlist's reads near-black
	 * and vanished completely on the #0a0a0f body. Painting every banner onto a
	 * constant near-white plate is the only fix that works for a logo we haven't
	 * seen yet — a mode-following surface just moves the failure to the other
	 * theme for white-on-transparent logos.
	 *
	 * ⚠️ This was #f0f1f6 in 0.32.0 and it made every logo look dull and washed —
	 * a grey plate greys the artwork sitting on it, and partner logos are drawn
	 * against white. Pure white is the correct plate here, not a compromise: it is
	 * what the artwork was designed for, and the glare it was hedging against is
	 * really a function of tile SIZE, which the component controls.
	 */
	--tt-partner-tile: #ffffff;

	/* Card rating star. Warm gold reads as a score in both modes. */
	--tt-star: #f5a623;

	/*
	 * Elevation. Dark UIs can't lean on grey shadows the way light ones do —
	 * a black shadow on a near-black surface is invisible. These are tuned per
	 * mode (see the light block below).
	 */
	--tt-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
	--tt-shadow-accent: 0 6px 24px rgba(255, 46, 76, 0.28);
	--tt-callout-shine: rgba(255, 255, 255, 0.35);

	/* One duration for every hover, so the UI feels like one system.
	   Overridden to 0s under prefers-reduced-motion in base.css. */
	--tt-speed: 0.16s;

	/* Radii */
	--tt-radius: 10px;
	--tt-radius-sm: 6px;
	--tt-radius-pill: 999px;

	/* Spacing scale */
	--tt-s1: 4px;
	--tt-s2: 8px;
	--tt-s3: 12px;
	--tt-s4: 16px;
	--tt-s5: 24px;
	--tt-s6: 32px;
	--tt-s7: 48px;
	--tt-s8: 64px;

	/* Layout */
	--tt-maxw: 1280px;
	--tt-gutter: clamp(0.75rem, 2.5vw, 1.5rem);

	/*
	 * Type scale.
	 *
	 * Added in 0.35.4. Before this the theme had NO type tokens at all: 95
	 * hardcoded font-size declarations across five files, with near-duplicates
	 * that no one could have chosen on purpose (13 and 13.5, 14 and 14.5, 11
	 * and 11.5, 16px and 1rem, 24px and 1.5rem). That is why narrowing
	 * --tt-maxw to 1280px made the page look messy: the container shrank 20%
	 * and not one piece of type moved with it.
	 *
	 * ⚠️ The display tier (2xl and up) is sized for a 1280px container. If
	 * --tt-maxw ever changes again, THIS BLOCK is the other half of that
	 * change — they are one decision, not two.
	 *
	 * ⚠️ Three things deliberately do NOT use these tokens, because they are
	 * not text and scaling them with the type scale breaks them:
	 *   - .tt-model__initial (30px / 44px) — avatar initials, sized to their
	 *     circle, not to the prose around them
	 *   - .tt-promo__close (20px) and .tt-mark (20/24px) — an icon glyph and
	 *     the brand wordmark
	 *   - .tt-search__input (16px) — the iOS zoom floor at layout.css:329. ONE
	 *     rule, not three. 0.35.4 skipped three 16px rules believing all were
	 *     inputs; .tt-hnav__link was the desktop MENU and stayed oversized for a
	 *     version because of it (fixed 0.35.6). Check the SELECTOR, not the value.
	 *     It stays LITERAL 16px so that a future edit to a
	 *     token can never drag it under the threshold.
	 */
	--tt-fs-micro: 10px;
	--tt-fs-2xs: 11px;
	--tt-fs-xs: 12px;
	--tt-fs-sm: 13px;
	--tt-fs-md: 14px;
	--tt-fs-base: 15px;
	--tt-fs-lg: 16px;
	--tt-fs-xl: 17px;
	--tt-fs-2xl: 19px;
	--tt-fs-3xl: 21px;
	--tt-fs-4xl: 24px;
	--tt-fs-5xl: 38px;

	/* Type — system stack: 0 bytes, 0 requests, no FOUT.
	   Revisit only if the brand genuinely needs a webfont. */
	--tt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	/* Thumbnails are 16:9 across every source we embed. Declaring it as a token
	   means the grid reserves space before images load — no CLS. */
	--tt-thumb-ratio: 16 / 9;
}

/*
 * Light mode.
 *
 * Only surfaces, text and border are re-declared. This is the entire cost of
 * having a second theme.
 *
 * Set via [data-theme] on <html> by an inline pre-paint script in header.php —
 * NOT by prefers-color-scheme. The default is an editorial choice (configurable
 * per-site from the options page), not an OS one.
 */
[data-theme="light"] {
	/*
	 * Body is deliberately DARKER than surface here. Light mode read flat
	 * because cards were white on near-white with only a hairline border —
	 * nothing separated them. Now cards sit brighter than the page and lift on
	 * a real shadow, which is what gives light mode the same card-forward feel
	 * dark mode gets for free.
	 */
	--tt-bg-body: #eff1f6;
	--tt-bg-surface: #ffffff;
	--tt-bg-raised: #f4f5f9;
	--tt-border: #dfe2ea;
	--tt-text: #15151c;
	--tt-text-muted: #5a5a6e;

	/* Grey shadows, not black — a black shadow on white looks like dirt. */
	--tt-shadow: 0 6px 20px rgba(20, 22, 40, 0.14);
	--tt-shadow-accent: 0 6px 20px rgba(255, 46, 76, 0.22);

	/* Blue needs to go darker on white to keep its contrast ratio. */
	--tt-info: #1673d6;
}