/*
Theme Name: LeilyMade
Theme URI: https://leilymade.ir
Author: LeilyMade
Description: Bespoke RTL-first WooCommerce theme for LeilyMade, a Persian handmade custom-gift shop. Standalone classic theme — no parent. Written natively bidirectional with CSS logical properties only; there is deliberately no rtl.css.
Version: 1.2.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: leilymade
Tags: e-commerce, rtl-language-support, custom-colors, translation-ready
*/

/* ==========================================================================
   DESIGN TOKENS — the single source of truth for this site's design system.
   ==========================================================================

   Every brand colour below was verified against BOTH
   `wp_options.theme_mods_flatsome` and the `<style id="custom-css">` block that
   production actually serves. They agree exactly, so these are authoritative —
   not approximations of a screenshot.

   Four values that the previous child theme got wrong, corrected here:

     - There is NO sand/cream accent. `#fdd79a` was WordPress core's "Atomic
       Cream" gradient stop leaking into a hex grep, not a brand colour.
     - The real surface is `#f1f1f1` (prod header-bottom + card columns).
       `#fefcfb` was a one-off divider colour promoted to a global background.
     - The container is 1250px. Flatsome's `site_width: 1280` minus its gutter
       is what the browser actually computes.
     - The radius trio is 12/14/16. `6px` and `20px` appear nowhere in prod.

   Do not add an rtl.css. This stylesheet is bidirectional by construction.
   ========================================================================== */

:root {
	/* --- Brand ------------------------------------------------------------ */
	--lm-navy: #034078;        /* primary: buttons, gradient end, headings */
	--lm-teal: #1282a2;        /* secondary: gradient start, fills, borders */

	/* Text-weight teal. The brand teal measures 4.43:1 on white — marginally
	   under AA — so anything that renders teal *as small text* uses this
	   instead. Fills and borders keep --lm-teal, where contrast does not apply. */
	--lm-teal-text: #0e6f88;
	--lm-navy-deep: #001f54;   /* links, topbar */
	--lm-success: #0db830;
	--lm-alert: #c70435;      /* surface: notice borders, the cart-count pill */

	/* Red as TEXT. --lm-alert is a surface colour and is not remapped for dark,
	   so on the dark ground it measured 3.02:1 — on the checkout validation
	   summary, the one message a customer must read to complete a purchase.
	   Same split as --lm-teal / --lm-teal-text. */
	--lm-alert-text: #c70435;

	/* Foreground for anything sitting ON a brand-coloured surface.
	   This exists because dark mode lightens --lm-navy to #5aa9e6, and white
	   text on that is 2.54:1 — a straight WCAG failure. The correct dark-mode
	   treatment for a light-blue button is dark text, not white. */
	--lm-on-primary: #ffffff;

	/* --lm-success is tuned for text on a light ground. As a filled surface it
	   is far too light for a white glyph (2.5:1), so surfaces use this. */
	--lm-success-strong: #0a7a20;

	/* The signature heading gradient, repeated on all five prod headings.
	   Always pair with a solid fallback colour — production sets none, so the
	   text renders invisible wherever background-clip:text is unsupported. */
	--lm-gradient: linear-gradient(180deg, var(--lm-teal), var(--lm-navy));

	/* --- Surfaces & text -------------------------------------------------- */
	--lm-bg: #ffffff;
	--lm-surface: #f1f1f1;     /* real, load-bearing prod surface */
	--lm-wash: #fcfafb;        /* prod hero section wash */
	--lm-ink: #4a4a4a;         /* body text; prod headings inherit this */
	--lm-ink-strong: #22282f;
	/* Darkened from #6b7280: that passed on white (4.65) but only reached
	   4.28 on the --lm-surface grey, where the checkout reassurance text and
	   several captions actually sit. This clears 4.5 on both grounds. */
	--lm-ink-muted: #5d6472;
	--lm-border: #e3e6ea;
	--lm-border-strong: #b8b8b8;  /* prod footer hairline */

	/* --- Typography ------------------------------------------------------- */
	/* Vazirmatn only. Production shipped five families — IRANYekanXFaNum,
	   YekanBakh, IRANYekan, IRANSansX and Kalameh — of which two were dead and
	   one was voided by a `!imprtant` typo. Vazirmatn is SIL OFL and self-hosted. */
	--lm-font: "Vazirmatn", system-ui, "Segoe UI", Tahoma, sans-serif;

	/* Exactly three sizes. Not a scale to pick from — the whole set.
	   Hierarchy therefore comes from weight, colour and space, not size.

	   Two are load-bearing and must not be lowered:
	     - body copy stays 16px (below that is a readability failure)
	     - form inputs stay 16px (below that iOS zooms the viewport on focus)
	   12px is for meta and captions only. Never body. */
	--lm-fs-sm: 0.75rem;     /* 12px — meta, captions, badges, counts   */
	--lm-fs-base: 0.875rem;  /* 14px — UI text, labels, buttons, tables */
	--lm-fs-lg: 1rem;        /* 16px — body, all headings, inputs       */

	/* The one deliberate exception, and it is deliberately named `display`
	   rather than added to the scale: the homepage hero and its section titles.
	   With everything else at 16px the front page read flat, so these get a
	   display size. Used by exactly two selectors, both of which appear only in
	   front-page.php — every other page title stays 16px.

	   Do not reach for this anywhere else. If a third selector wants it, that is
	   a sign the scale needs revisiting, not that this token needs spreading. */
	--lm-fs-display: 1.625rem;  /* 26px — homepage hero + section titles only */

	--lm-lh-tight: 1.3;
	--lm-lh-base: 1.75;   /* Persian needs more leading than Latin at equal size */

	/* --- Space (4px base) ------------------------------------------------- */
	--lm-s1: 0.25rem;
	--lm-s2: 0.5rem;
	--lm-s3: 0.75rem;
	--lm-s4: 1rem;
	--lm-s5: 1.5rem;
	--lm-s6: 2rem;
	--lm-s7: 3rem;
	--lm-s8: 4rem;
	--lm-s9: 6rem;

	/* --- Shape ------------------------------------------------------------ */
	--lm-radius-sm: 12px;   /* prod button_radius — authoritative */
	--lm-radius: 14px;
	--lm-radius-lg: 16px;
	--lm-radius-pill: 999px;

	--lm-shadow-sm: 0 1px 2px rgb(3 64 120 / 0.06), 0 1px 3px rgb(3 64 120 / 0.08);
	--lm-shadow: 0 4px 12px rgb(3 64 120 / 0.08), 0 2px 4px rgb(3 64 120 / 0.06);
	--lm-shadow-lg: 0 12px 32px rgb(3 64 120 / 0.12);

	/* --- Layout ----------------------------------------------------------- */
	--lm-container: 1250px;   /* what prod actually emits */
	--lm-container-narrow: 780px;
	--lm-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
	--lm-header-h: 79px;      /* prod .header-main height */

	/* --- Motion -----------------------------------------------------------
	   Three durations, not one. Guidance is explicit that copying a single
	   duration onto every transition is wrong: motion length should follow the
	   distance travelled and the context. Press feedback must feel instant;
	   a panel opening can afford to be seen. */
	--lm-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--lm-ease-out: cubic-bezier(0.22, 1, 0.36, 1);  /* entrances — decelerate on arrival */
	--lm-dur-fast: 150ms;                            /* press, hover */
	--lm-dur: 200ms;                                 /* colour, border */
	--lm-dur-slow: 350ms;                            /* panels, drawers */
	--lm-reveal-y: 8px;                              /* Subtle-tier scroll travel */
}

/* --------------------------------------------------------------------------
   Dark mode.

   Production has no dark palette at all, so these are new — but a storefront
   that inverts to unreadable grey-on-grey in a dark viewport is a real defect,
   and every token above is a light-mode value. Navy is lightened toward teal
   here because #034078 on a dark ground fails contrast badly.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--lm-navy: #5aa9e6;
		--lm-teal: #4fc3d9;
		--lm-teal-text: #4fc3d9;
		--lm-navy-deep: #8ec7f0;
		--lm-gradient: linear-gradient(180deg, #4fc3d9, #5aa9e6);

		/* Dark ink on the lightened brand surfaces — 10:1 rather than 2.5:1. */
		--lm-on-primary: #0b1620;
		--lm-success-strong: #5ddb7a;
		--lm-alert-text: #ff8095;   /* #c70435 is 3.02:1 on the dark ground */

		--lm-bg: #10151b;
		--lm-surface: #1a212a;
		--lm-wash: #151b22;
		--lm-ink: #d3d8de;
		--lm-ink-strong: #f2f5f8;
		--lm-ink-muted: #98a1ad;
		--lm-border: #2b333d;
		--lm-border-strong: #3a444f;

		--lm-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
		--lm-shadow: 0 4px 12px rgb(0 0 0 / 0.45);
		--lm-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
	}
}

:root[data-theme="dark"] {
	--lm-navy: #5aa9e6;
	--lm-teal: #4fc3d9;
	--lm-teal-text: #4fc3d9;
	--lm-navy-deep: #8ec7f0;
	--lm-gradient: linear-gradient(180deg, #4fc3d9, #5aa9e6);
	--lm-on-primary: #0b1620;
	--lm-success-strong: #5ddb7a;
	--lm-alert-text: #ff8095;   /* #c70435 is 3.02:1 on the dark ground */

	--lm-bg: #10151b;
	--lm-surface: #1a212a;
	--lm-wash: #151b22;
	--lm-ink: #d3d8de;
	--lm-ink-strong: #f2f5f8;
	--lm-ink-muted: #98a1ad;
	--lm-border: #2b333d;
	--lm-border-strong: #3a444f;

	--lm-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
	--lm-shadow: 0 4px 12px rgb(0 0 0 / 0.45);
	--lm-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
}

/* ==========================================================================
   FONTS — self-hosted, no CDN.

   Only 400/500/700 exist as files. Never specify 300 or 600: the browser would
   synthesise a faux weight from the nearest face, which looks broken in Arabic
   script far more than in Latin.
   ========================================================================== */

@font-face {
	font-family: "Vazirmatn";
	src: url("assets/fonts/Vazirmatn-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Vazirmatn";
	src: url("assets/fonts/Vazirmatn-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Vazirmatn";
	src: url("assets/fonts/Vazirmatn-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}