/**
 * Base typography and element defaults.
 */

/* 0.2.0-dev.9: accessible focus system, site-wide — real root cause found
   live before writing any of this. WordPress/Storefront's own Customizer-
   generated inline stylesheet (`<style id="storefront-style-inline-css">`,
   already documented in layout.css for the 0.2.0-dev.8 footer-text bug)
   also contains "a:focus, button:focus, .button.alt:focus, input:focus,
   textarea:focus, input[type=\"search\"]:focus, … { outline-color: #7f54b3
   }" — WooCommerce's own signature purple, applied on plain ":focus" (so
   on a real keyboard Tab AND, wherever the browser's own default
   outline-style would show, that literal violet paints through) for every
   element this theme doesn't already give its own dedicated ":focus-
   visible" override (most cards/nav links/footer links already do, from
   earlier rounds — this was only ever visible on the elements those
   rounds never touched: generic buttons, form inputs, anything WooCommerce
   renders natively on cart/checkout/account pages).
   The client's own recommended pattern is implemented literally: real
   keyboard focus (":focus-visible") gets a discreet champagne ring;
   anything else (a mouse click, a programmatic .focus()) gets none. The
   fallback ring below is deliberately NOT a bare ":focus-visible" — that
   would only be specificity (0,1,0), too low to beat WooCommerce's own
   more specific competitors (e.g. "input[type=\"search\"]:focus", 0,2,0;
   ".button.alt:focus", 0,3,0) for the OUTLINE-COLOR property specifically.
   Each selector below deliberately mirrors one of WooCommerce's own, so
   every property this rule needs to win stays tied-or-higher in
   specificity, with this file loading later settling every tie. Existing,
   already-correct per-component ":focus-visible" rules elsewhere in this
   theme (cards, nav, mega-menu, footer) are all MORE specific than this
   fallback and keep winning unchanged — this only fills the gaps. */
:focus:not(:focus-visible) {
	outline: none;
}

a:focus-visible,
button:focus-visible,
.button:focus-visible,
.button.alt:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="submit"]:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 3px;
}

/* Touch devices: replaces the native grey/blue tap-highlight (and, on some
   Android/Chromium builds, the same WooCommerce-purple leak documented
   above) with a champagne tint — the client's own explicit ask. Purely
   visual, never removes the real :active feedback already used throughout
   this theme for transient touch states. */
html {
	-webkit-tap-highlight-color: rgba(197, 173, 138, .18);
}

body {
	background-color: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-ink);
	line-height: 1.2;
	font-weight: 500;
	margin: 0 0 var(--space-4);
}

h1 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.75rem); }

p {
	margin: 0 0 var(--space-4);
}

a {
	color: var(--color-ink);
	text-decoration-color: var(--color-neutral);
	text-underline-offset: .2em;
}

a:hover,
a:focus {
	color: var(--color-gold-hover);
}

::selection {
	background-color: var(--color-accent-soft);
	color: var(--color-ink);
}

hr {
	border: none;
	border-top: 1px solid var(--color-accent-soft);
	margin: var(--space-8) 0;
}

label {
	display: inline-block;
	margin-bottom: var(--space-2);
	color: var(--color-ink);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-neutral);
	border-radius: var(--radius-sm);
	color: var(--color-ink);
	font-family: var(--font-body);
	padding: var(--space-2) var(--space-3);
	width: 100%;
}

/* 0.2.0-dev.9: outline (2px solid --color-accent-soft, a pale blue)
   removed from here — it was unconditional (plain ":focus", not
   ":focus-visible"), so it showed on every mouse click into any field,
   not just real keyboard navigation, and its colour didn't match this
   round's champagne spec anyway. border-color kept (a quiet colour cue,
   never flagged as a problem, and it doesn't create the "large
   border/rectangle" the client is asking to remove). The real focus
   indicator for keyboard users now comes from the dedicated
   ":focus-visible" rule right below — a box-shadow, not an outline,
   specifically so it can never compete with (or lose to) WordPress/
   Storefront's own inline ".../input[type=\"search\"]:focus {
   outline-color: #7f54b3 }" rule (see this file's own top-of-file note on
   the global focus reset) — box-shadow is a completely different
   property, so no specificity fight is even possible here regardless of
   which rule "wins" the (now invisible, outline:none) outline colour. */
input:focus,
select:focus,
textarea:focus {
	border-color: var(--color-gold);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	box-shadow: 0 0 0 2px rgba(197, 173, 138, .22);
	outline: none;
}