/* الرموز التصميمية لمتجر الأزياء.
   هذا الملف يُنقل حرفيًا إلى القالب في المرحلة ٣ — لا تكتب فيه أي قواعد تخطيط. */

@font-face {
	font-family: 'Almarai';
	src: url('../fonts/almarai-400.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Almarai';
	src: url('../fonts/almarai-700.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: 'Almarai';
	src: url('../fonts/almarai-800.woff2') format('woff2');
	font-weight: 800;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Sans Arabic';
	src: url('../fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Sans Arabic';
	src: url('../fonts/ibm-plex-sans-arabic-500.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Sans Arabic';
	src: url('../fonts/ibm-plex-sans-arabic-600.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}

:root {
	/* الألوان */
	--fs-bg: #E9E8E5;
	--fs-surface: #FFFFFF;
	--fs-ink: #2E3338;
	--fs-ink-soft: #5A6066;
	--fs-accent: #C39F32;
	--fs-accent-hover: #D0AE45;
	/* نص الأزرار فوق اللون المميز — أسود لا أبيض، لأن الأبيض عليه 2.5:1 */
	--fs-accent-ink: #2E3338;
	--fs-link: #4264AC;
	--fs-border: #D9CCCE;
	--fs-sale: #BA2926;
	--fs-success: #1B7F4B;

	/* الخطوط */
	--fs-font-head: 'Almarai', 'Segoe UI', Tahoma, sans-serif;
	--fs-font-body: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

	/* مقياس الحجم — نسبة 1.25 */
	--fs-text-xs: 0.75rem;
	--fs-text-sm: 0.875rem;
	--fs-text-base: 1rem;
	--fs-text-lg: 1.25rem;
	--fs-text-xl: 1.563rem;
	--fs-text-2xl: 1.953rem;
	--fs-text-3xl: 2.441rem;

	/* المسافات — مقياس 4px */
	--fs-space-1: 0.25rem;
	--fs-space-2: 0.5rem;
	--fs-space-3: 0.75rem;
	--fs-space-4: 1rem;
	--fs-space-5: 1.5rem;
	--fs-space-6: 2rem;
	--fs-space-7: 3rem;
	--fs-space-8: 4rem;

	/* الشكل */
	--fs-radius: 6px;
	--fs-radius-lg: 12px;
	/* تدرّج الظل مشتق من jet black (46,51,56) لا من قيمة قديمة. */
	--fs-shadow: 0 1px 2px rgba(46, 51, 56, 0.04), 0 8px 24px rgba(46, 51, 56, 0.06);
	--fs-shadow-hover: 0 2px 4px rgba(46, 51, 56, 0.06), 0 16px 40px rgba(46, 51, 56, 0.10);

	/* التخطيط */
	--fs-container: 1360px;
	--fs-header-height: 72px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ملاحظة: لا تضع `overflow-x: hidden` على html.
   هي تخفي الفيضان الأفقي بدل أن تمنعه، وتُبطل فحص التحقق نفسه:
   مع الإخفاء يصبح scrollWidth مساويًا لـ clientWidth دائمًا، فالفحص ينجح
   حتى لو خرج عنصر عن الشاشة. التخطيط يجب أن يكون سليمًا بذاته. */

body {
	margin: 0;
	background: var(--fs-bg);
	color: var(--fs-ink);
	font-family: var(--fs-font-body);
	font-size: var(--fs-text-base);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--fs-font-head);
	line-height: 1.3;
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

:focus-visible {
	/* الأزرق أوضح من الذهبي كحلقة تركيز على خلفية فاتحة. */
	outline: 2px solid var(--fs-link);
	outline-offset: 2px;
}