/*
 * The Joe Cozzo Show — skin.
 *
 * Loaded AFTER style.css (see inc/site.php), so anything here overrides the
 * SIGNAL defaults in src/sass/_tokens.scss. Plain CSS, not compiled: edit it
 * by hand per show. Only put in here what differs from the defaults — a
 * value that repeats the default is a value someone will later think matters.
 *
 * This site IS the default design, so the file is mostly a map of the knobs.
 * A new show usually only needs the four accent values and the fonts.
 */

/* ── Brand colour ─────────────────────────────────────────────────────────
 * --accent      the brand colour, exact — used identically in both themes
 * --accent-ink  the brand colour as TEXT on that theme's background; must
 *               hold ~5:1 contrast (darker on light, lighter on dark)
 * --accent-deep a darkened fill for small white text on a solid block
 * --accent-2    a tint for soft backgrounds (chips, hover washes)
 */
[data-theme="light"] {
	--accent:      #0181dd;
	--accent-ink:  #0166b0;
	--accent-deep: #0169b6;
	--accent-2:    #d8ecfb;
}
[data-theme="dark"] {
	--accent:      #0181dd;
	--accent-ink:  #2a9bea;
	--accent-deep: #0169b6;
	--accent-2:    #0b2c45;
}

/* ── Fonts ────────────────────────────────────────────────────────────────
 * The families are loaded by config.php's `fonts`; this is where they are
 * assigned. Keep a system fallback on the end of each.
 */
:root {
	--font-display: "Modica Black", "Archivo", system-ui, sans-serif;
	--font-body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
}

/* ── Hero photo ───────────────────────────────────────────────────────────
 * --photo-w is the cut-out's rendered WIDTH, and it is really the photo's
 * aspect ratio in disguise: the figure is placed by width and the height
 * follows, so a photo with a different ratio needs this re-derived from the
 * image (height you want ÷ image ratio), not eyeballed. img/hero-photo.png
 * here is Link (OoT-style key art, MIRRORED to face the copy and CROPPED at the
 * belt to match TJCS's head-and-shoulders framing; 1290x1151, ratio 0.892 vs TJCS's
 * 1.126), so the svh cap is re-derived for the same ~90svh height.
 */
.hero {
	--photo-w: min(clamp(372px, 48.8vw, 804px), 101svh);
}