/*
Theme Name:     Theorys
Theme URI:
Description:    Storefront child theme.
Author:         Me
Author URI:
Template:       storefront
Version:        0.1.0
*/

/* =========================================================================
   THEORYS BRAND TOKENS
   Single source of truth for colour, gradient and type. Everything in the
   theme references these custom properties — no hardcoded hex anywhere else.
   ========================================================================= */
:root {
	--forest-deep: #1B3A2F;
	--forest-mid:  #2E5E4E;
	--ink:         #0E120F;
	--white:       #FFFFFF;
	--off-white:   #F6F8F7;
	--silver:      #C7CCD1;
	--platinum-hi: #D9DDE1;
	--platinum-lo: #A8AEB4;
	--line:        #E2E6E4;
	/* Review stars. The only warm colour in an otherwise green/platinum palette,
	   so it is deliberately a muted antique gold rather than a saturated amber —
	   star ratings read as gold at any saturation, and a bright one fights the
	   forest greens everywhere else. Decorative glyphs only; every star row
	   carries an aria-label, so this is never the sole carrier of meaning. */
	--gold:        #C9A227;

	/* Metallic accent — thin rules / badges ONLY, never large fills. */
	--metal: linear-gradient(135deg, var(--platinum-hi), var(--platinum-lo));

	/* Type */
	--font-head: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================================
   HEADER LOGO
   Deliberately here and not in theorys-home.css / theorys-shop.css: the lander
   and the shop shell each declare their OWN .thr-header block in those two
   separate stylesheets, and only ONE of them loads on any given page. style.css
   is the single sheet both shells share, so a rule here is the only way the two
   headers cannot drift apart.

   Height, not width, is the constraint — the header bars are 64px (lander) and
   68px (shop), so 32px still clears both without stretching the bar. Note the
   shop's .thr-header-inner is min-height, so a logo taller than 68px WOULD grow
   that bar; keep this comfortably under it. width:auto keeps the 3.15:1 wordmark
   undistorted; the width/height attributes on the tag reserve the box so nothing
   shifts as the image decodes.

   The PNGs are generated at exactly these display sizes (101x32 and 202x64), so
   changing the height here means regenerating both files — otherwise the 1x
   asset gets upscaled and goes soft on non-retina screens.

   The logo is the BLACK artwork and both headers are var(--white). If a header
   is ever moved onto --forest-deep or --ink, this image goes invisible and a
   white version has to be supplied — it cannot be recoloured with CSS.
   ========================================================================= */
.thr-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.thr-logo-img {
	display: block; /* removes the inline baseline gap under the image */
	height: 24px;
	width: auto;
}
@media (min-width: 768px) {
	.thr-logo-img { height: 32px; }

	/* Nudge the wordmark in from the wrap's left edge. Desktop only: at 414px the
	   logo already shares a tight row with the cart, Sign in and the burger, and
	   shifting it right would eat into that. */
	.thr-logo { margin-left: 14px; }
}