/* ==========================================================================
   M&S TECH STORE — Design tokens
   Every color, size, radius, shadow and timing in the theme comes from here.
   Do not hard-code values in component files; add a token instead.
   ========================================================================== */

:root {
	/* ---- Black scale ---------------------------------------------------- */
	--black-900: #050505; /* page background */
	--black-800: #0d0d0d; /* alternating sections, top bar */
	--black-700: #161616; /* cards, sticky header */
	--black-600: #222222; /* borders, inputs, dividers */
	--black-500: #2e2e2e; /* hover border on dark surfaces */

	/* ---- Gold scale ----------------------------------------------------- */
	--gold-300: #f8e08e; /* highlights, glow */
	--gold-400: #f2c94c; /* hover */
	--gold-500: #d4a62a; /* primary gold */
	--gold-700: #a67c1b; /* pressed, deep shadows */
	--gold-gradient: linear-gradient(135deg, #f8e08e 0%, #d4a62a 45%, #a67c1b 100%);
	--gold-gradient-h: linear-gradient(90deg, #a67c1b 0%, #f8e08e 50%, #a67c1b 100%);
	--gold-rgb: 212, 166, 42;

	/* ---- Text ----------------------------------------------------------- */
	--text-primary: #f5f5f5;   /* 19.6:1 on black-900 */
	--text-secondary: #a8a8a8; /* 8.6:1 on black-900, 7.6:1 on black-700 */
	--text-muted: #8a8a8a;     /* 5.8:1 on black-900 — small print only */
	--text-on-gold: #0d0d0d;   /* 9.4:1 on gold-500 */

	/* ---- Status --------------------------------------------------------- */
	--success: #2ecc71;
	--warning: #f5a524;
	--warning-rgb: 245, 165, 36;
	--danger: #e74c3c;
	--danger-text: #ff7a6b; /* danger tuned for AA text contrast on black */
	--whatsapp: #25d366;
	--whatsapp-dark: #128c4b;

	/* ---- Typography ----------------------------------------------------- */
	--font-ar: "Cairo", "Tajawal", system-ui, sans-serif;
	--font-en-head: "Montserrat", "Cairo", system-ui, sans-serif;
	--font-en-body: "Inter", "Cairo", system-ui, sans-serif;
	--font-head: var(--font-ar);
	--font-body: var(--font-ar);

	/* Type scale — mobile first, scales up at 768px and 1200px */
	--fs-display: 2.25rem; /* 36 → 48 → 56 */
	--fs-h1: 1.875rem;     /* 30 → 36 → 48 */
	--fs-h2: 1.5rem;       /* 24 → 28 → 36 */
	--fs-h3: 1.25rem;      /* 20 → 22 → 28 */
	--fs-h4: 1.125rem;     /* 18 → 18 → 22 */
	--fs-lg: 1.0625rem;    /* 17 → 18 */
	--fs-base: 1rem;       /* 16 */
	--fs-sm: 0.875rem;     /* 14 */
	--fs-xs: 0.75rem;      /* 12 */

	--lh-tight: 1.2;
	--lh-snug: 1.4;
	--lh-body: 1.7;
	--tracking-caps: 0.14em;

	--fw-regular: 400;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-black: 800;

	/* ---- Spacing (8px system) ------------------------------------------ */
	--sp-1: 0.25rem; /* 4  */
	--sp-2: 0.5rem;  /* 8  */
	--sp-3: 0.75rem; /* 12 */
	--sp-4: 1rem;    /* 16 */
	--sp-5: 1.5rem;  /* 24 */
	--sp-6: 2rem;    /* 32 */
	--sp-7: 2.5rem;  /* 40 */
	--sp-8: 3rem;    /* 48 */
	--sp-9: 4rem;    /* 64 */
	--sp-10: 5rem;   /* 80 */
	--sp-12: 6rem;   /* 96 */
	--section-y: var(--sp-9);

	/* ---- Layout --------------------------------------------------------- */
	--container: 1320px;
	--gutter: 1rem;
	--header-h: 76px;
	--topbar-h: 38px;
	--bottom-nav-h: 64px;
	--tap: 44px;

	/* ---- Radius --------------------------------------------------------- */
	--r-sm: 6px;
	--r-btn: 10px;
	--r-md: 12px;
	--r-card: 16px;
	--r-lg: 24px;
	--r-pill: 999px;

	/* ---- Borders -------------------------------------------------------- */
	--border: 1px solid var(--black-600);
	--border-gold: 1px solid rgba(var(--gold-rgb), 0.55);

	/* ---- Shadows & glow ------------------------------------------------- */
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
	--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
	--glow-sm: 0 0 0 1px rgba(var(--gold-rgb), 0.35), 0 6px 22px rgba(var(--gold-rgb), 0.15);
	--glow-md: 0 0 0 1px rgba(var(--gold-rgb), 0.5), 0 12px 36px rgba(var(--gold-rgb), 0.22);
	--glow-text: 0 0 24px rgba(var(--gold-rgb), 0.35);

	/* ---- Surfaces ------------------------------------------------------- */
	--surface-1: #0f0f10; /* elevated panels */
	--surface-2: #17171a; /* cards on panels */
	--line: rgba(255, 255, 255, 0.08);
	/* Product image well: one light studio surface everywhere photos appear. */
	--well: radial-gradient(circle at 50% 38%, #ffffff 0%, #f4f4f5 55%, #e4e4e7 100%);
	--glass: rgba(13, 13, 13, 0.72);
	--overlay: rgba(0, 0, 0, 0.7);
	--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");

	/* ---- Motion --------------------------------------------------------- */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--t-fast: 160ms;
	--t-base: 280ms;
	--t-slow: 480ms;
	--lift: translateY(-6px);

	/* ---- Layers --------------------------------------------------------- */
	--z-header: 100;
	--z-bottom-nav: 110;
	--z-float: 120;
	--z-drawer: 200;
	--z-modal: 300;
	--z-toast: 400;
	--z-loader: 500;

	color-scheme: dark;
}

/* English pages use Montserrat headings + Inter body */
html[lang^="en"] {
	--font-head: var(--font-en-head);
	--font-body: var(--font-en-body);
}

@media (min-width: 768px) {
	:root {
		--fs-display: 3rem;
		--fs-h1: 2.25rem;
		--fs-h2: 1.75rem;
		--fs-h3: 1.375rem;
		--fs-lg: 1.125rem;
		--gutter: 1.5rem;
		--section-y: var(--sp-10);
	}
}

@media (min-width: 1200px) {
	:root {
		--fs-display: 3.5rem;
		--fs-h1: 3rem;
		--fs-h2: 2.25rem;
		--fs-h3: 1.75rem;
		--fs-h4: 1.375rem;
		--gutter: 2rem;
		--section-y: var(--sp-12);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--t-fast: 0ms;
		--t-base: 0ms;
		--t-slow: 0ms;
		--lift: none;
	}
}