/**
 * ANZO Store — Design tokens.
 *
 * Single source of truth for colour, type, space, radius, shadow and motion.
 * Nothing else in the theme should hardcode a raw value.
 */

:root {
	/* ---------------------------------------------------------------
	 * Colour — neutral-led, one accent. Premium stores earn contrast
	 * from restraint, not from a wide palette.
	 * --------------------------------------------------------------- */
	--color-ink-900: #0b0f19;
	--color-ink-800: #111827;
	--color-ink-700: #1f2937;
	--color-ink-600: #374151;
	--color-ink-500: #6b7280;
	--color-ink-400: #9ca3af;
	--color-ink-300: #d1d5db;
	--color-ink-200: #e5e7eb;
	--color-ink-100: #f3f4f6;
	--color-ink-50: #f9fafb;
	--color-white: #ffffff;

	/* Overridden inline from the Customizer (see inc/enqueue.php). */
	--color-primary: #111827;
	--color-primary-hover: #000000;
	--color-accent: #e0532f;
	--color-accent-hover: #c4441f;
	--color-accent-soft: #fdf0eb;

	/* Hero background wash — overridden per colour scheme below. */
	--hero-wash-a: #fdf4ef;
	--hero-wash-b: #f9fafb;

	/* Cart counter. Deliberately not the accent: the badge has to read as a
	 * separate signal ("you have items") sitting on top of an accent-coloured
	 * header, and two oranges touching each other lose that. */
	--color-cart-badge: #8cc63f;
	/* White on #8cc63f is about 2:1 and fails AA — the badge carries a real
	 * number, so the text goes dark instead (9.1:1). */
	--color-cart-badge-text: #10240a;

	--color-success: #0f8a5f;
	--color-success-soft: #e8f6f0;
	--color-warning: #b45309;
	--color-warning-soft: #fef6e7;
	--color-danger: #c0392b;
	--color-danger-soft: #fdecea;
	--color-sale: #c0392b;

	/* Semantic surfaces */
	--surface: var(--color-white);
	--surface-muted: var(--color-ink-50);
	--surface-sunken: var(--color-ink-100);
	--surface-inverse: var(--color-ink-900);

	--text: var(--color-ink-800);
	--text-muted: var(--color-ink-500); /* 5.0:1 on white */
	/* NOT ink-400 (#9ca3af): that is 2.5:1 on white and fails WCAG AA for
	 * text. This is the lightest grey that still clears 4.5:1, which matters
	 * because --text-subtle carries real content (category labels, review
	 * counts, input placeholders), not just decoration. */
	--text-subtle: #6f7787; /* 4.5:1 on white */
	--text-inverse: var(--color-white);

	--border: var(--color-ink-200);
	--border-strong: var(--color-ink-300);

	/* ---------------------------------------------------------------
	 * Typography — one UI family, one display family.
	 * System stack first: zero network cost, and Arabic falls back to
	 * the platform's own Arabic face which renders better than a
	 * half-supported webfont.
	 * --------------------------------------------------------------- */
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	/* Arabic body text reads best in a Naskh-style face. Segoe UI (Windows) and
	 * Geeza Pro (macOS/iOS) both ship good Arabic and cost no network request;
	 * Noto Kufi is deliberately NOT first — it is a display face and tiring to
	 * read at paragraph sizes. */
	--font-arabic: "Segoe UI", "Geeza Pro", "Noto Naskh Arabic", Tahoma,
		"Dubai", "Noto Sans Arabic", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

	/* Fluid type scale — clamp() so tablet never needs its own breakpoint. */
	--text-xs: 0.75rem;
	--text-sm: 0.8125rem;
	--text-base: 0.9375rem;
	--text-md: 1rem;
	--text-lg: clamp(1.0625rem, 0.4vw + 0.97rem, 1.1875rem);
	--text-xl: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
	--text-2xl: clamp(1.5rem, 1.1vw + 1.25rem, 2rem);
	--text-3xl: clamp(1.875rem, 1.8vw + 1.4rem, 2.75rem);
	--text-4xl: clamp(2.25rem, 3.2vw + 1.4rem, 3.75rem);

	--leading-tight: 1.15;
	--leading-snug: 1.3;
	--leading-normal: 1.6;
	--leading-relaxed: 1.75;

	--weight-normal: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.04em;
	--tracking-wider: 0.12em;

	/* ---------------------------------------------------------------
	 * Space — 4px base, named by step so components stay in rhythm.
	 * --------------------------------------------------------------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* Vertical rhythm between page sections, tighter on small screens. */
	--section-y: clamp(2.5rem, 5vw, 5rem);

	/* ---------------------------------------------------------------
	 * Layout
	 * --------------------------------------------------------------- */
	--container-max: 1280px;
	--container-narrow: 760px;
	/* Checkout and cart are shortcode/block pages, so they render through
	 * page.php rather than the WooCommerce wrapper. 760px is right for an
	 * article and far too tight for a two-column checkout, hence their own
	 * width: ~70% of the viewport, capped so it never sprawls on a wide
	 * monitor and never drops below the reading container on a laptop. */
	--container-commerce: clamp(760px, 70vw, 1440px);
	--container-pad: clamp(1rem, 4vw, 2rem);
	/* Sizes the header. Static by design — never written to from JS. */
	--header-height: 72px;
	/* The header's *measured* height, kept up to date by assets/js/app.js.
	 * Used for scroll padding and sticky offsets only. Keeping it separate
	 * from --header-height is what prevents a measure→resize→measure loop. */
	--header-offset: var(--header-height);

	/* ---------------------------------------------------------------
	 * Radius, borders, elevation
	 * --------------------------------------------------------------- */
	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-pill: 999px;

	--shadow-xs: 0 1px 2px rgba(11, 15, 25, 0.05);
	--shadow-sm: 0 1px 3px rgba(11, 15, 25, 0.08), 0 1px 2px rgba(11, 15, 25, 0.04);
	--shadow-md: 0 4px 12px rgba(11, 15, 25, 0.08);
	--shadow-lg: 0 12px 32px rgba(11, 15, 25, 0.1);
	--shadow-xl: 0 24px 64px rgba(11, 15, 25, 0.14);

	--ring: 0 0 0 3px rgba(224, 83, 47, 0.35);

	/* ---------------------------------------------------------------
	 * Motion — short and few. Premium reads as calm, not animated.
	 * --------------------------------------------------------------- */
	--ease: cubic-bezier(0.2, 0, 0.2, 1);
	--duration-fast: 120ms;
	--duration: 200ms;
	--duration-slow: 320ms;

	--z-dropdown: 100;
	--z-header: 200;
	--z-overlay: 300;
	--z-drawer: 400;
	--z-modal: 500;
}

/* ---------------------------------------------------------------
 * Colour schemes
 *
 * Chosen in Customizer → ANZO Store → Brand & Colours, applied as
 * `<html data-scheme="…">`. Each scheme redefines only the accent family and
 * the hero wash — the neutral greys stay identical so contrast, readability
 * and every component's spacing are unaffected by the choice.
 *
 * Every accent below clears 4.5:1 against white for text use.
 * --------------------------------------------------------------- */

[data-scheme="fresh"] {
	--color-accent: #0e7490;
	--color-accent-hover: #155e75;
	--color-accent-soft: #ecfeff;
	--ring: 0 0 0 3px rgba(14, 116, 144, 0.3);
	--hero-wash-a: #ecfeff;
	--hero-wash-b: #f0fdfa;
}

[data-scheme="trust"] {
	--color-accent: #1d4ed8;
	--color-accent-hover: #1e40af;
	--color-accent-soft: #eff6ff;
	--ring: 0 0 0 3px rgba(29, 78, 216, 0.3);
	--hero-wash-a: #eff6ff;
	--hero-wash-b: #f5f7ff;
}

[data-scheme="nature"] {
	--color-accent: #15803d;
	--color-accent-hover: #166534;
	--color-accent-soft: #f0fdf4;
	--ring: 0 0 0 3px rgba(21, 128, 61, 0.3);
	--hero-wash-a: #f0fdf4;
	--hero-wash-b: #f7fee7;
}

[data-scheme="bold"] {
	--color-accent: #6d28d9;
	--color-accent-hover: #5b21b6;
	--color-accent-soft: #f5f3ff;
	--ring: 0 0 0 3px rgba(109, 40, 217, 0.3);
	--hero-wash-a: #f5f3ff;
	--hero-wash-b: #fdf4ff;
}

/* Arabic / RTL uses a face with proper Arabic coverage. */
:root:lang(ar),
[dir="rtl"] {
	--font-sans: var(--font-arabic);
	--font-display: var(--font-arabic);
	/* Arabic glyphs sit taller; give them a touch more line box. */
	--leading-normal: 1.75;
	--tracking-tight: 0;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0ms;
		--duration: 0ms;
		--duration-slow: 0ms;
	}
}