/* Design tokens v2 (Instant-Gaming-inspired, light) — canonical source, see /home/ubuntu/mosioc/design-system.md */
:root {
	/* Surfaces */
	--bg-base: #F3F4F6;
	--bg-surface: #FFFFFF;
	--bg-elevated: #FFFFFF;
	--bg-elevated-hover: #FAFAFB;
	--border-subtle: rgba(15, 23, 42, .08);
	--border-strong: rgba(15, 23, 42, .16);

	/* Skeleton loading placeholders — deliberately more visible than
	   --bg-base/--bg-elevated (which are both near-white here and read as
	   invisible against the page background), since a skeleton's only job
	   is to be seen as "something is loading". */
	--skeleton-base: #E4E7EB;
	--skeleton-highlight: #F3F4F6;

	/* Text */
	--text-primary: #14161A;
	--text-secondary: #5B6472;
	--text-muted: #9AA1AC;

	/* Brand — shared by CTAs and discount badges on purpose, see design-system.md */
	--accent: #FF6A1A;
	--accent-hover: #E85A0C;
	--accent-active: #C94C08;
	--accent-soft: rgba(255, 106, 26, .10);
	--accent-2: #1E88E5;

	/* Semantic — status only, never used for discounts */
	--success: #17A34A;
	--warning: #F59E0B;
	--warning-soft: rgba(245, 158, 11, .08);
	--warning-text: #92620A;
	--danger: #DC2626;
	--gold: #FFC107;

	/* Footer — the one deliberately dark section on an otherwise light site */
	--footer-bg: #14161A;
	--footer-text: #C7CBD1;
	--footer-text-muted: #6B7280;
	--footer-border: rgba(255, 255, 255, .08);

	/* Typography */
	--font-family: "IRANSansX", "Vazirmatn", Tahoma, system-ui, sans-serif;
	--font-2xs: .75rem;
	--font-xs: .8125rem;
	--font-sm: .875rem;
	--font-base: 1rem;
	--font-md: 1.125rem;
	--font-lg: 1.25rem;
	--font-xl: 1.5rem;
	--font-2xl: 1.875rem;
	--font-3xl: 2.25rem;
	--font-4xl: 3rem;

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;

	/* Radius */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-full: 999px;

	/* Shadow — soft/neutral, not colored glows (that was a dark-mode trick) */
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
	--shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
	--shadow-card-hover: 0 12px 32px rgba(15, 23, 42, .14);

	/* Motion */
	--ease: cubic-bezier(.4, 0, .2, 1);
	--transition-fast: 150ms var(--ease);
	--transition-base: 200ms var(--ease);
}

/*
 * Dark theme — same token set, only the color values change. Every
 * component in this theme reads colors exclusively from these custom
 * properties (see design-system.md rule 2), so adding a component here
 * is the ONLY thing dark mode needs — no per-component dark-mode CSS.
 * Future components must keep following that rule to inherit this for
 * free; if a new color is needed, add it as a token pair (light value in
 * :root, dark value in both blocks below) rather than a hardcoded hex.
 *
 * Three-state toggle, matching the site's data-theme attribute (set by
 * assets/js/theme-toggle.js):
 *   - no attribute            -> follow prefers-color-scheme
 *   - data-theme="light"      -> force light, even if system is dark
 *   - data-theme="dark"       -> force dark, even if system is light
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg-base: #0E1013;
		--bg-surface: #1A1D23;
		--bg-elevated: #1E2128;
		--bg-elevated-hover: #262A33;
		--border-subtle: rgba(255, 255, 255, .08);
		--border-strong: rgba(255, 255, 255, .16);

		--skeleton-base: #262A33;
		--skeleton-highlight: #363B47;

		--text-primary: #F3F4F6;
		--text-secondary: #A8AFBC;
		--text-muted: #6B7280;

		--accent-soft: rgba(255, 106, 26, .16);
		--accent-2: #4FA3F0;

		--success: #22C55E;
		--warning: #FBBF24;
		--warning-soft: rgba(251, 191, 36, .14);
		--warning-text: #FCD34D;
		--danger: #F87171;

		--footer-bg: #08090B;
		--footer-border: rgba(255, 255, 255, .08);

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
		--shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
		--shadow-card-hover: 0 12px 32px rgba(0, 0, 0, .6);

		/* Astra's own color slots (not part of this design system) still
		   paint several structural surfaces directly — the separate-container
		   page background and article/widget panels — bypassing our tokens
		   entirely. Repoint just those two slots so Astra's own chrome goes
		   dark too, without touching Astra's other slots (used for its blue
		   accent elsewhere, a separate concern from this palette). */
		--ast-global-color-4: var(--bg-surface);
		--ast-global-color-5: var(--bg-base);

		/* Astra also has its own fixed "heading" (-2) and "body text" (-3)
		   color slots — used for every heading, the site title, the primary
		   menu links, and footer items — completely separate from our
		   --text-primary/--text-secondary tokens. Left alone, headings stay
		   a fixed dark navy that's fine on a light background but nearly
		   invisible once the page goes dark. */
		--ast-global-color-2: var(--text-primary);
		--ast-global-color-3: var(--text-secondary);
	}
}

:root[data-theme="dark"] {
	--bg-base: #0E1013;
	--bg-surface: #1A1D23;
	--bg-elevated: #1E2128;
	--bg-elevated-hover: #262A33;
	--border-subtle: rgba(255, 255, 255, .08);
	--border-strong: rgba(255, 255, 255, .16);

	--skeleton-base: #262A33;
	--skeleton-highlight: #363B47;

	--text-primary: #F3F4F6;
	--text-secondary: #A8AFBC;
	--text-muted: #6B7280;

	--accent-soft: rgba(255, 106, 26, .16);
	--accent-2: #4FA3F0;

	--success: #22C55E;
	--warning: #FBBF24;
	--warning-soft: rgba(251, 191, 36, .14);
	--warning-text: #FCD34D;
	--danger: #F87171;

	--footer-bg: #08090B;
	--footer-border: rgba(255, 255, 255, .08);

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
	--shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
	--shadow-card-hover: 0 12px 32px rgba(0, 0, 0, .6);

	--ast-global-color-4: var(--bg-surface);
	--ast-global-color-5: var(--bg-base);
	--ast-global-color-2: var(--text-primary);
	--ast-global-color-3: var(--text-secondary);
}

/* Primary site font. Same file already bundled (admin-only) with the
   persian-woocommerce plugin under a per-site IRANSansX license (see that
   plugin's assets/fonts/iransans/iransans.css) — copied here rather than
   referenced in place so the theme doesn't depend on another plugin staying
   installed/active. "ss02" is the stylistic set the vendor's own CSS enables
   everywhere it uses this font (see iransans-fanum.css); without it some
   glyphs render in the wrong alternate form. */
@font-face {
	font-family: "IRANSansX";
	src: url("../fonts/IRANSansX.woff2") format("woff2 supports variations"), url("../fonts/IRANSansX.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IRANSansX";
	unicode-range: U+2190-21FF, U+2600-27BF, U+2B00-2BFF, U+1F000-1FFFF, U+FE0F;
	src: local("Apple Color Emoji"), local("Segoe UI Emoji"), local("Noto Color Emoji"), local("Segoe UI Symbol");
}

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

/*
 * Vazirmatn (a broad-coverage variable font) has its own glyphs — usually
 * blank, near-invisible, or wrong-shaped — for symbol/emoji codepoints, so
 * the browser never reaches its normal fallback to the OS's real color
 * emoji font (Tahoma/system-ui after it in the font stack don't matter:
 * the browser only moves to the next font in the stack when the current
 * one has NO glyph at all for that character, and Vazirmatn does have one).
 * A second @font-face under the SAME family name, scoped to just the
 * emoji/symbol Unicode ranges and sourced from the OS's own emoji font via
 * local(), wins the font-matching for exactly those characters — fixing
 * every emoji on the site (⚡ 🔒 🎧 ✔ 🛒 🖥️ 🎮 🅧 📰 ❓ ☰ …) in one place,
 * with no markup changes needed anywhere, present or future.
 */
@font-face {
	font-family: "Vazirmatn";
	unicode-range: U+2190-21FF, U+2600-27BF, U+2B00-2BFF, U+1F000-1FFFF, U+FE0F;
	src: local("Apple Color Emoji"), local("Segoe UI Emoji"), local("Noto Color Emoji"), local("Segoe UI Symbol");
}

html {
	background: var(--bg-base);
}

body {
	background: var(--bg-base);
	color: var(--text-primary);
	font-family: var(--font-family);
	font-size: var(--font-base);
	line-height: 1.8;
	font-feature-settings: "ss02";
	/* A hidden (opacity:0/visibility:hidden) position:absolute element still
	   contributes to the page's scrollable area even though nothing is
	   visibly there — the nav mega-menu panel (.gs-nav-categories__panel)
	   centers under its trigger and can extend past the viewport edge when
	   that trigger sits close to one side. Clipping horizontal overflow
	   here is the site-wide backstop so a hidden panel never shifts visible
	   content or adds dead scroll space, regardless of trigger position. */
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family);
	font-weight: 700;
	line-height: 1.3;
	color: var(--text-primary);
}

a {
	color: var(--accent);
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--accent-hover);
}

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

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}