/**
 * Ayat Food Theme - design tokens.
 *
 * CANONICAL layout + typography foundation. Must mirror src/styles.css :root
 * exactly. Loaded before design-system.css (see inc/enqueue.php).
 *
 * @package Ayat_Food
 * @since   1.0.0
 */

:root {
	/* ── Typography families (React SoT: src/styles.css) ──
	   Must live in real :root — NOT inside Tailwind @theme (browsers ignore @theme). */
	--font-display: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
	--font-sans: "Outfit", system-ui, sans-serif;
	--ipek-font-display: var(--font-display);
	--ipek-font-sans: var(--font-sans);

	/* ── Brand colors (mirror theme.json palette) ── */
	--ipek-primary: #b31217;
	--ipek-primary-foreground: #f5f1eb;
	--ipek-secondary: #780000;
	--ipek-accent: #c8a46b;
	--ipek-foreground: #111111;
	--ipek-background: #ffffff;

	--ipek-surface: #111111;
	--ipek-surface-elevated: #1a1a1a;
	--ipek-cream: #f5f1eb;
	--ipek-dark: #0b0b0b;

	--ipek-gold: #c8a46b;
	--ipek-gold-champagne: #e2c08d;
	--ipek-gold-bronze: #9e6f3d;

	/* ── Motion (src/styles.css / src/lib/design-system.ts) ── */
	--ipek-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ipek-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	/* Alias used across pages — same curve as DS_EASE_REVEAL. */
	--ipek-ease-reveal: var(--ipek-ease-out);
	--ipek-duration-instant: 120ms;
	--ipek-duration-ui: 260ms;
	--ipek-duration-ui-slow: 320ms;
	--ipek-duration-reveal: 650ms;
	--ipek-duration-slow: 900ms;
	--ipek-stagger: 90ms;

	/* ── Layout (src/styles.css) ── */
	--ipek-container: 1480px;
	--ipek-gutter: 1.5rem;
	--ipek-gutter-sm: 2.5rem;
	--ipek-gutter-lg: 3.5rem;
	--ipek-gutter-xl: 4rem;

	--ipek-section-y: clamp(5rem, 10vw, 7.5rem);
	--ipek-section-y-lg: clamp(6.5rem, 11vw, 9rem);
	--ipek-stack-sm: 1rem;
	--ipek-stack-md: 1.5rem;
	--ipek-stack-lg: 2rem;
	--ipek-stack-xl: 2.5rem;

	/* ── Radii ── */
	--ipek-radius-btn: 14px;
	--ipek-radius-btn-sm: 12px;
	--ipek-radius-card: 26px;
	--ipek-radius-panel: 28px;

	/* ── Type scale ── */
	--ipek-text-hero: clamp(3.25rem, 5.8vw, 6.25rem);
	--ipek-text-h1: clamp(2.4rem, 4.2vw, 3.85rem);
	--ipek-text-h2: clamp(1.5rem, 2.4vw, 2.15rem);
	--ipek-text-h2-lg: clamp(1.5rem, 2.4vw, 2.15rem);
	--ipek-text-h3: clamp(1.85rem, 2.8vw, 3.35rem);
	--ipek-text-sub: clamp(1.2rem, 2.2vw, 1.65rem);
	--ipek-text-body: 0.9375rem;
	--ipek-text-body-sm: 0.875rem;
	--ipek-text-label: 0.625rem;
	--ipek-text-meta: 0.6875rem;
	--ipek-tracking-label: 0.34em;
	--ipek-tracking-meta: 0.28em;
	--ipek-tracking-btn: 0.22em;
	--ipek-leading-display: 1.02;
	--ipek-leading-body: 1.7;

	--ipek-shadow-card:
		0 1px 0 color-mix(in oklab, white 6%, transparent) inset,
		0 28px 80px -48px oklch(0 0 0 / 0.55);
	--ipek-shadow-card-hover:
		0 1px 0 color-mix(in oklab, white 8%, transparent) inset,
		0 36px 100px -44px oklch(0 0 0 / 0.62);
	--ipek-border-card: color-mix(in oklab, white 10%, transparent);
}

@media (max-width: 767px) {
	:root {
		--ipek-gutter: 1.125rem;
		--ipek-section-y: clamp(2.5rem, 6.5vw, 3.5rem);
		--ipek-section-y-lg: clamp(3rem, 7vw, 4rem);
		--ipek-stack-md: 1rem;
		--ipek-stack-lg: 1.25rem;
		--ipek-radius-card: 18px;
		--ipek-radius-panel: 20px;
		--ipek-text-hero: clamp(2rem, 8.5vw, 2.75rem);
		--ipek-text-h1: clamp(1.65rem, 6.4vw, 2.2rem);
		--ipek-text-h2: clamp(1.3rem, 4.8vw, 1.65rem);
		--ipek-text-h2-lg: clamp(1.3rem, 4.8vw, 1.65rem);
		--ipek-text-h3: clamp(1.4rem, 5.2vw, 1.85rem);
		--ipek-text-sub: clamp(1rem, 3.6vw, 1.2rem);
		--ipek-text-body: 0.9375rem;
		--ipek-leading-body: 1.62;
		--ipek-tracking-label: 0.28em;
		--ipek-tracking-btn: 0.2em;
	}
}

@media (max-width: 359px) {
	:root {
		--ipek-gutter: 1rem;
	}
}