/*
 * RahkarTheme — "زمرّد" (Emerald) install skin.
 *
 * WHY this file instead of a theme.json style variation:
 *   The native variation route only reaches values that are actually wired
 *   to theme.json tokens. ~87% of the theme's border-radius is hard-coded px
 *   in component CSS, and the product card pulls its radius from a per-block
 *   `--rpc-radius` (not a global token), so a variation literally cannot
 *   sharpen them. A scoped stylesheet can — and it sidesteps the global-styles
 *   object-cache + sanitize fragility entirely (filemtime-versioned, fully
 *   under our control).
 *
 * HOW it's gated: loaded ONLY when wp-config defines RAHKAR_SKIN === 'emerald'
 *   (see rahkar_active_skin() in inc/enqueue.php), which also stamps the
 *   `skin-emerald` body class. So a different install (the blue/rounded
 *   client) ships ZERO of these bytes. Per the perf budget: a page that
 *   doesn't use the skin sends none of it.
 *
 * HOW it wins the cascade WITHOUT !important or load-order luck:
 *   - Token overrides sit on `body.skin-emerald{}` (specificity 0,1,1) which
 *     beats WordPress's `:root{}` preset/custom-prop block (0,1,0). Because
 *     every component reads `var(--wp--preset--color--…)` / `var(--wp--custom--…)`,
 *     re-pointing the tokens here re-skins color + weight + tokenised radius
 *     site-wide (header included — its --rh-* tokens alias the presets).
 *   - Element restyles are scoped `.skin-emerald <selector>` (0,2,0+) so they
 *     out-rank the component CSS (0,1,0) no matter the print order, including
 *     late-printed block styles.
 */

/* ─── 1. Brand + neutral palette → emerald & warm-sage ─────────────────────
 *  Re-point the preset tokens. White-text contrast on the primary ≈ 4.6:1
 *  (matches the original blue's legibility for CTAs). Neutrals shift cool→warm
 *  so the whole canvas reads different at a glance, not just the accents. */
body.skin-emerald {
	--wp--preset--color--surface:      #eef1ec;
	--wp--preset--color--muted:        #e3e7e0;
	--wp--preset--color--border:       #d7ddd3;
	--wp--preset--color--contrast:     #13160f;
	--wp--preset--color--text:         #1b1e16;
	--wp--preset--color--text-muted:   #5f6258;
	--wp--preset--color--primary:      #0a8560;
	--wp--preset--color--primary-dark: #075f45;

	/* Typography: client-1 is fashion-thin (100/300/400); this install reads
	   more solid/"trusted pharmacy" (300/400/600). Vazirmatn is variable, so
	   the heavier weights cost zero extra bytes. */
	--wp--custom--fw--light:  300;
	--wp--custom--fw--base:   400;
	--wp--custom--fw--strong: 600;

	/* Tokenised radii → sharp/editorial. Reaches every element that uses the
	   radius tokens (the hard-coded ones are handled per-component below). */
	--wp--custom--radius--sm: 1px;
	--wp--custom--radius--md: 2px;
	--wp--custom--radius--lg: 3px;
	--wp--custom--radius--xl: 4px;
	--wp--custom--button--radius: 0px;

	/* Density: tighten the two most-used spacing presets ~15% so the page
	   rhythm differs from client-1 without touching layout structure. */
	--wp--preset--spacing--40: 1.25rem;
	--wp--preset--spacing--50: 1.9rem;
}

/* ─── 2. Tinted page canvas ────────────────────────────────────────────────
 *  Body goes from pure white to soft sage; the white cards/header now "float"
 *  on it. Beats WP's `body{background-color:var(--…--base)}` via the class. */
body.skin-emerald {
	background-color: var(--wp--preset--color--surface);
}

/* ─── 3. Product card → borderless, sharp, soft-lifted ─────────────────────
 *  Client-1: bordered + rounded, no resting shadow.
 *  This install: borderless white tiles with sharp corners and a faint
 *  resting shadow so they separate from the sage canvas. The media radius
 *  (which is driven by the per-block --rpc-radius) is overridden directly. */
.skin-emerald .rpc-card {
	border-color: transparent;
	border-radius: 2px;
	box-shadow: var(--wp--preset--shadow--xs, 0 1px 2px rgba(15,17,21,0.06));
}
.skin-emerald .rpc-card:hover {
	box-shadow: var(--wp--preset--shadow--md, 0 8px 24px rgba(15,17,21,0.10));
}
.skin-emerald .rpc-card__media {
	border-radius: 0;
}

/* Badges go from soft pills/chips to crisp tags — a small but recognisable
   card-language change. (Keep the cart-count circle and swatch pills round.) */
.skin-emerald .rpc-badge,
.skin-emerald .rpc-pct-badge {
	border-radius: 0;
}

/* ─── 4. Header surfaces → sharp ───────────────────────────────────────────
 *  The search bar and icon buttons are the most prominent rounded chrome.
 *  Colours already follow the tokens above; here we only square the corners. */
.skin-emerald .rh-search--inline,
.skin-emerald .rh-toggle,
.skin-emerald .rh-cart,
.skin-emerald .rh-account {
	border-radius: 0;
}
.skin-emerald .rh-search-wrap.is-open::before,
.skin-emerald .rh-search-dropdown,
.skin-emerald .rh-menu__list .sub-menu {
	border-radius: 0 0 2px 2px;
}
.skin-emerald .rh-menu__list .sub-menu a {
	border-radius: 0;
}

/* ─── 5. Form controls → sharp ─────────────────────────────────────────────
 *  Inputs/selects/textareas across cart, checkout, account, OTP, modals.
 *  Excludes checkable controls so radios/checkboxes keep their native shape. */
.skin-emerald input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.skin-emerald select,
.skin-emerald textarea {
	border-radius: 2px;
}

/* ─── 6. Buttons → crisp editorial CTAs ────────────────────────────────────
 *  Radius already 0 via the button token; the core/Wc/element buttons inherit
 *  it. This rule only guarantees the square corner on the handful of buttons
 *  that hard-code their own radius. */
.skin-emerald .wp-element-button,
.skin-emerald .wc-block-components-button,
.skin-emerald button.single_add_to_cart_button,
.skin-emerald .button {
	border-radius: 0;
}