/* Mishiland design tokens: light, premium storefront. Every colour, radius, space and type size comes from here. */

@font-face {
	font-family: "Vazirmatn";
	src: url("../fonts/vazirmatn-var.woff2") format("woff2-variations"),
	     url("../fonts/vazirmatn-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	color-scheme: light;

	/* Surfaces: warm white page, white cards. */
	--ml-bg:        #f7f7f5;
	--ml-surface-1: #ffffff;
	--ml-surface-2: #f2f2ef;   /* inputs, subtle fills */
	--ml-surface-3: #e9e9e5;   /* pressed / dividers on fills */
	--ml-border:    #e6e6e1;
	--ml-border-strong: #d4d4ce;

	/* Text. Contrast: text 17.8, text-2 7.8, text-3 >= 4.8 on every surface incl. the #f2f2ef input fill. */
	--ml-text:   #16181a;
	--ml-text-2: #4d5358;
	--ml-text-3: #62686d;

	/* Brand accent: the emerald of the official logo (sampled ≈ #004A3A), one step lighter for UI. */
	--ml-accent:        #0a6650;
	--ml-accent-strong: #064c3c;
	--ml-accent-soft:   #e8f3ef;
	--ml-accent-line:   #b7d8cc;
	--ml-gold:          #a87a2e;   /* logo gold, decorative only (3.8:1, never for text) */

	/* Secondary accent: restrained Mishiland orange (deals, highlights). Text on white 5.0:1. */
	--ml-accent-2:      #b45309;
	--ml-accent-2-soft: #fdf1e6;
	--ml-accent-2-line: #f3cfa9;
	--ml-on-accent:     #ffffff;

	/* Dark block (footer, occasional promo). */
	--ml-ink:       #15191c;
	--ml-ink-2:     #1f2529;
	--ml-on-ink:    #eef1f2;
	--ml-on-ink-2:  #aeb7bc;

	/* Status. */
	--ml-sale:    var(--ml-accent-2);
	--ml-sale-soft: var(--ml-accent-2-soft);
	--ml-warning: #b7791f;
	--ml-star:    #e5a50a;
	--ml-success: #15803d;
	--ml-danger:  #c62828;

	/* Type. */
	--ml-font: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
	--ml-fs-xs:  .8125rem;  /* 13px, smallest used */
	--ml-fs-sm:  .875rem;   /* 14 */
	--ml-fs-md:  1rem;      /* 16 */
	--ml-fs-lg:  1.125rem;  /* 18 */
	--ml-fs-xl:  1.3125rem; /* 21 */
	--ml-fs-2xl: 1.625rem;  /* 26 */
	--ml-fs-3xl: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
	--ml-lh: 1.9;
	--ml-lh-tight: 1.5;

	/* Space (4px grid). */
	--ml-s1: 4px;  --ml-s2: 8px;  --ml-s3: 12px; --ml-s4: 16px;
	--ml-s5: 20px; --ml-s6: 24px; --ml-s8: 32px; --ml-s10: 40px; --ml-s12: 48px; --ml-s16: 64px;

	/* Shape & depth: borders first, soft shadows only for lift. */
	--ml-r-sm: 8px;
	--ml-r-md: 12px;
	--ml-r-lg: 16px;
	--ml-r-xl: 24px;
	--ml-r-pill: 999px;
	--ml-shadow-sm: 0 1px 2px rgba(22, 24, 26, .05);
	--ml-shadow-md: 0 6px 20px -8px rgba(22, 24, 26, .14);
	--ml-shadow-lg: 0 18px 40px -16px rgba(22, 24, 26, .22);

	/* Layout. */
	--ml-container: 1280px;
	--ml-gutter: 16px;
	--ml-header-h: 64px;
	--ml-bottom-nav-h: 64px;
	--ml-tap: 44px;

	--ml-ease: cubic-bezier(.2, .7, .2, 1);
	--ml-dur: .18s;
}

@media (min-width: 768px) {
	:root { --ml-gutter: 24px; }
}
@media (min-width: 1024px) {
	:root { --ml-gutter: 32px; --ml-header-h: 76px; }
}
/* Large desktop (1440–1600+): a slightly wider canvas instead of stretching content. */
@media (min-width: 1440px) {
	:root { --ml-container: 1400px; --ml-gutter: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	:root { --ml-dur: 0s; }
}