/**
 * M M Sanidaz — Typography
 * ------------------------------------------------------------------
 * Applies the design-token type system site-wide (not just the pages
 * touched in Phase 2), so the site stops reading as default
 * OceanWP/WooCommerce typography. Deliberately conservative in scope:
 * body copy and headings only — not a layout change.
 */

body {
	font-family: var(--mmsc-font-body);
	color: var(--mmsc-color-text);
}

/* Page background: found via live inspection that TWO legacy rules fight
   this, both a plain `body` selector: OceanWP's own style.min.css
   (`background-color:#fff`, no !important) AND the Customizer's
   Additional CSS (`background-color:#fff !important`, output last in
   <head>, after every enqueued stylesheet). A same-specificity
   `!important` rule can only be beaten by higher specificity, not by
   matching the !important alone (source order would still decide the
   tie) — `html body` raises specificity above plain `body` so this wins
   regardless of load order, same technique used elsewhere in this
   codebase for Additional-CSS conflicts. */
html body {
	background-color: var(--mmsc-color-bg) !important;
}

/* `html body` outranks the OceanWP Customizer's inline `h1, h2 … h6
   { font-family: Poppins }` (printed after this file), so every heading
   is the D LUNAFAM heading face unless a component sets its own. (The
   Additional CSS `h1 { font-family: poppins !important }` was removed in
   the 2026-09-29 clean-up.) */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
	font-family: var(--mmsc-font-heading);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--mmsc-color-text);
}

/* The OceanWP Customizer sets `body { font-weight: 900 }` at ≤480px, so
   every phone showed body copy in black-weight text. */
html body {
	font-weight: 400;
	/* The Customizer's `body { color: #4a4a4a }` prints after this file;
	   text that sets no colour of its own inherits the brand espresso. */
	color: var(--mmsc-color-text);
}

/* The text-based site title (now that the foreign logo image has been
   removed) is the first thing visitors see — worth deliberate styling
   rather than leaving OceanWP's plain default. */
.site-title.site-logo-text {
	font-family: var(--mmsc-font-heading);
	font-weight: 600;
	font-size: var(--mmsc-text-xl);
	letter-spacing: 0.01em;
}

/* WooCommerce page/section headings (Shop, category archives, "Related
   products", etc.) pick up the same heading font automatically via the
   h1–h6 rule above; this only adjusts sizing for the ones WooCommerce
   renders smaller than a normal page title. */
.woocommerce-products-header__title,
.woocommerce div.product .related.products > h2 {
	font-family: var(--mmsc-font-heading);
	font-weight: 600;
	font-size: var(--mmsc-text-2xl);
}

@media (max-width: 767px) {
	h1 {
		font-size: var(--mmsc-text-3xl);
	}
}

/* Sitewide price color — found via live browser inspection (matching
   computed styles against every loaded stylesheet's rules), not
   assumed: WooCommerce core's own woocommerce.min.css sets
   `.price { color: #57bf6d }` (a bright green) as a base default, AND a
   second, more specific rule colors `.woocommerce-Price-amount` /
   `bdi` the same green — the more specific one wins even where this
   theme already set a color on the outer .price element (confirmed on
   both the shop-card price and the single-product price, which had
   correctly dark computed color on the outer element while the inner
   amount/bdi span still rendered green). Neither WooCommerce rule uses
   !important, so overriding both the general and the specific selector
   here — once, sitewide, rather than duplicating it per template — is
   enough to win on specificity. This also covers contexts not otherwise
   styled by this theme (cart, checkout, mini-cart, upsells, the
   OceanWP floating add-to-cart bar). */
.woocommerce .price,
.woocommerce .woocommerce-Price-amount.amount,
.woocommerce .woocommerce-Price-amount.amount bdi {
	color: var(--mmsc-color-text);
}

.woocommerce del .woocommerce-Price-amount.amount,
.woocommerce del .woocommerce-Price-amount.amount bdi {
	color: var(--mmsc-color-text-muted);
}

.woocommerce ins .woocommerce-Price-amount.amount,
.woocommerce ins .woocommerce-Price-amount.amount bdi {
	color: var(--mmsc-color-text);
}

/* OceanWP's sitewide "Theme Color" Customizer setting is bright blue
   (rgb(19,175,240), darkening to rgb(11,124,172) on hover) — found via
   live inspection to be driving every generic button/submit element that
   isn't already styled more specifically by this project (mini-cart
   Checkout, search submit, coupon/quantity forms, product tabs) and
   every plain link hover. That's exactly the "generic bright blue"
   forbidden by the brief. Same selectors as OceanWP's own rule, so this
   wins on this child theme's normal load order without needing
   !important — and because it's the SAME specificity, not higher, it
   doesn't affect the more specific product-card/single-product button
   rules elsewhere, which continue to win as before. Not changing the
   Customizer setting itself, to keep this pass scoped to CSS. */
body a:hover,
body a.light:hover {
	color: var(--mmsc-color-primary);
}

/* `body` prefix on every selector below: confirmed via live inspection
   (mini-cart Checkout link, still rendering blue after a first attempt at
   this fix) that OceanWP's own equivalent `.button` rule has identical
   specificity to a plain `.button` selector and was winning on source
   order — this child theme's CSS does not reliably load after OceanWP's
   on every part of this page, so equal specificity isn't safe to rely on
   here (same root cause already found for the product-tabs color fix in
   single-product.css). `body` adds one type selector of specificity
   without narrowing which elements match. */
body input[type="button"],
body input[type="reset"],
body input[type="submit"],
body button[type="submit"],
body .button,
body .woocommerce-cart .wp-element-button,
body .woocommerce-checkout .wp-element-button,
body .wp-block-button__link {
	background-color: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface);
}

body input[type="button"]:hover,
body input[type="reset"]:hover,
body input[type="submit"]:hover,
body button[type="submit"]:hover,
body .button:hover,
body .woocommerce-cart .wp-element-button:hover,
body .woocommerce-checkout .wp-element-button:hover,
body .wp-block-button__link:hover {
	background-color: var(--mmsc-color-dark-hover);
	color: var(--mmsc-color-surface);
}