/**
 * Afripacka Design System — tokens only.
 *
 * Every other stylesheet in this theme consumes these custom properties
 * instead of hardcoding values, so the whole visual language (spacing,
 * color, type, radius, shadow, motion) stays changeable from one file.
 *
 * Breakpoints (documented, not enforced here — see layout.css media queries):
 * 320, 375, 480, 768, 1024, 1280, 1440, 1920
 */

:root {
	/* ---- Spacing: strict 8px system ---- */
	--space-1: 4px;   /* half-step, used sparingly (icon gaps) */
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--space-6: 40px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 80px;
	--space-10: 96px;
	--space-11: 120px;

	/* ---- Brand palette: brown, premium, warm ---- */
	--color-brand-900: #3a2418;
	--color-brand-800: #4a2e1d;
	--color-brand-700: #5c3a21;  /* primary brand brown */
	--color-brand-600: #7a4d2c;
	--color-brand-500: #9c6b3f;
	--color-brand-400: #c08e5f;
	--color-brand-300: #dcb88f;
	--color-brand-200: #efd9bd;
	--color-brand-100: #f7ebd9;
	--color-brand-50: #faf5ed;

	--color-neutral-900: #1c1917;
	--color-neutral-700: #44403c;
	--color-neutral-500: #78716c;
	--color-neutral-300: #d6d3d1;
	--color-neutral-200: #e7e5e4;
	--color-neutral-100: #f5f3f1;
	--color-white: #ffffff;

	/* Secondary accent: sage/eco green — used for eco-friendly signals and to
	   break the brown-only monotone with a deliberate second brand color. */
	--color-accent-700: #2f5d47;
	--color-accent-500: #4a8968;
	--color-accent-100: #e2efe7;
	--color-accent-50: #f1f8f4;

	--color-success: #2f7d4f;
	--color-success-bg: #e6f4ea;
	--color-warning: #b5750a;
	--color-warning-bg: #fdf1dc;
	--color-danger: #c23b3b;
	--color-danger-bg: #fbe9e9;

	/* Semantic aliases — templates reference these, not raw brand/neutral scales. */
	--color-text: var(--color-neutral-900);
	--color-text-muted: var(--color-neutral-500);
	--color-surface: var(--color-white);
	--color-surface-alt: var(--color-brand-50);
	--color-border: var(--color-neutral-200);
	--color-primary: var(--color-brand-700);
	--color-primary-hover: var(--color-brand-800);
	--color-on-primary: var(--color-white);

	/* ---- Typography ---- */
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-arabic: "Noto Kufi Arabic", var(--font-sans);

	--text-xs: 0.75rem;    /* 12px */
	--text-sm: 0.9375rem;  /* 15px — slightly larger than typical for comfortable reading */
	--text-base: 1.0625rem; /* 17px */
	--text-md: 1.25rem;    /* 20px */
	--text-lg: 1.5rem;     /* 24px */
	--text-xl: 1.875rem;   /* 30px */
	--text-2xl: 2.5rem;    /* 40px */
	--text-3xl: 3.25rem;   /* 52px */
	--text-4xl: 4rem;      /* 64px */
	--text-5xl: 4.75rem;   /* 76px */
	--text-6xl: 5.5rem;    /* 88px — hero-scale statements */

	--leading-tight: 1.2;
	--leading-normal: 1.5;
	--leading-relaxed: 1.7;

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-black: 800;

	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.08em;

	/* ---- Radius: rounded, premium, never sharp ---- */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-full: 999px;

	/* ---- Shadow: soft, never harsh ---- */
	--shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.06);
	--shadow-md: 0 4px 12px rgba(28, 25, 23, 0.08);
	--shadow-lg: 0 12px 32px rgba(28, 25, 23, 0.12);
	--shadow-hover: 0 16px 40px rgba(28, 25, 23, 0.16);

	/* ---- Motion: micro-animations, never sluggish ---- */
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--duration-fast: 150ms;
	--duration-base: 250ms;
	--duration-slow: 400ms;

	/* ---- Layout ---- */
	--container-max: 1320px;
	--container-padding: var(--space-3);
	--header-height: 72px;
	--header-height-mobile: 60px;
}

/* Arabic gets its own font stack once html[lang=ar] / dir=rtl is present. */
html[lang="ar"] body,
html[lang="ary"] body {
	font-family: var(--font-arabic);
}

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

body {
	font-family: var(--font-sans);
	color: var(--color-text);
	line-height: var(--leading-normal);
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

/* No horizontal scrolling, ever — the spec's non-negotiable. */
html,
body {
	overflow-x: hidden;
	max-width: 100vw;
}

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

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

/* Confident, tight-tracked headings read as designed rather than default
   browser serif/sans — a large part of what separates a premium brand
   from "a WordPress site with a logo swapped in." */
h1, h2, h3,
.afripacka-section__title,
.afripacka-hero__title,
.afripacka-product-page__title {
	font-weight: var(--weight-black);
	letter-spacing: var(--tracking-tight);
}