/*
 * Web Store (demo) — skin.
 *
 * Loaded AFTER style.css (inc/site.php), so anything here overrides the
 * defaults in src/sass/_tokens.scss. Plain CSS, not compiled: edit by hand per
 * store. Only put in here what differs from the defaults — a value that
 * repeats the default is a value someone will later think matters.
 *
 * This store IS the default design, so the file is mostly a map of the knobs.
 * A new store usually needs the accent block, the fonts, and maybe the shape.
 */

/* ── Brand colour ─────────────────────────────────────────────────────────
 * --accent      the brand colour, exact — fills (buttons, badges, the bar)
 * --accent-ink  the brand colour as TEXT on that theme's page; ~4.5:1
 *               (darker on light, lighter on dark)
 * --accent-2    a soft tint (icon discs, washes)
 * --on-accent   text on an --accent fill
 *
 * ⚠ Keep `.inset` in the DARK selector. The footer and the promo band are
 * dark in both themes by re-pointing tokens (.inset); a dark block that
 * names only [data-theme="dark"] leaves them on the default blue in light
 * mode.
 */
/*
[data-theme="light"] {
	--accent:     #1f5eff;
	--accent-ink: #1747c4;
	--accent-2:   #e3ebff;
	--on-accent:  #ffffff;
}
[data-theme="dark"],
.inset {
	--accent:     #4d7dff;
	--accent-ink: #86a6ff;
	--accent-2:   #18244a;
}
*/

/* ── Fonts ────────────────────────────────────────────────────────────────
 * Loaded by config.php's `fonts`; assigned here. Keep a system fallback.
 */
:root {
	--font-display: "Inter Tight", system-ui, sans-serif;
	--font-body:    "Inter", system-ui, -apple-system, sans-serif;
}

/* ── Shape + voice ────────────────────────────────────────────────────────
 * --display-weight / -case / -track   every heading at once
 * --radius / --radius-lg              cards, images, panels
 * --radius-btn                        999px = pills; 10px = soft squares
 * --product-ratio                     ONE number: 1 square, .8 portrait
 * --product-fit                       cover (crop) | contain (cut-outs)
 * --logo-h / --logo-w                 the masked SVG logo's box
 * --hero-bg, --hero-ratio             the homepage hero band + photo shape
 */