/**
 * Popcorn design tokens — the single source of truth for every colour,
 * radius, shadow, spacing and type value in the theme and plugins.
 *
 * Source: Claude Design v1.1 BRAND.md + build prompt 0A.2 (extended tokens).
 * No raw hex/rgba values may appear anywhere else (theme.json mirrors these
 * values for the editor; `npm run check:tokens` verifies the mirror).
 */
:root {
	/* Brand — official, do not alter */
	--color-marigold: #EFA500; /* communication */
	--color-pink: #E47790; /* nurture */
	--color-rumba: #F06830; /* warmth — primary buy/reserve CTA only */
	--color-prussian: #023C60; /* trust */
	--color-peach: #FFF1DF; /* simplicity — page background */

	/* Semantic */
	--color-bg: var(--color-peach);
	--color-surface: #FBE6CB; /* inputs, image grounds */
	--color-card: #FFFFFF; /* cards and panels, never the page */
	--color-ink: var(--color-prussian);
	--color-ink-muted: #51697C;
	--color-cta: var(--color-rumba);
	--color-cta-strong: #B8430F; /* compact CTAs, CTA hover, sale price, low stock */
	--color-brand: var(--color-marigold);
	--color-brand-strong: #8A5A00; /* marigold-hued text */
	--color-nurture: var(--color-pink);
	--color-nurture-strong: #B84A66; /* pink-hued text, on peach/white only */
	--color-trust: var(--color-prussian);
	--color-success: #2F9E6B;
	--color-error: #C0392B;
	--color-line: #EDD9BE;
	--color-on-dark: var(--color-card); /* text on Prussian / cta-strong fills */

	/* Extended — used in the v1.1 file */
	--color-nurture-tint: #FCE4EA; /* text on it must be --color-ink */
	--color-trust-tint: #E3ECF2;
	--color-brand-tint: rgba(239, 165, 0, .14); /* on peach/white only */
	--color-ink-on-dark-muted: #9DB0BF; /* secondary text on Prussian only */
	--color-on-dark-tint: rgba(255, 241, 223, .12); /* social circles on Prussian */
	--color-header-bg: rgba(255, 241, 223, .92);
	--color-whatsapp: #25D366; /* shadow/tint only */
	--color-whatsapp-strong: #128C7E; /* WhatsApp button fill */
	--color-scrim: rgba(2, 60, 96, .45); /* modal / drawer backdrop */

	/* Accent for the current area (set by body class, see accent.css) */
	--color-accent: var(--color-nurture);
	--color-accent-strong: var(--color-nurture-strong);
	--color-accent-tint: var(--color-nurture-tint);
	--color-link-underline: var(--color-accent);

	/* Shape */
	--radius-input: 12px;
	--radius-card: 16px;
	--radius-panel: 22px;
	--radius-pill: 999px;
	--radius-round: 50%;

	/* Depth */
	--shadow-soft: 0 8px 24px rgba(2, 60, 96, .08);
	--shadow-cta: 0 10px 24px rgba(240, 104, 48, .28);
	--shadow-nurture: 0 10px 24px rgba(228, 119, 144, .30);
	--shadow-whatsapp: 0 10px 24px rgba(37, 211, 102, .35);

	/* Spacing: 8px grid plus 4px half-steps */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 40px;
	--space-8: 48px;
	--space-9: 64px;
	--container-max: 1360px;
	--gutter: clamp(16px, 3vw, 40px);

	/* Type */
	--font-heading: "Baloo 2", "Baloo Bhaijaan 2", ui-rounded, sans-serif;
	--font-body: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
	--font-size-display: 2.5rem; /* 40/48 */
	--line-height-display: 3rem;
	--font-size-h1: 2rem; /* 32/40 */
	--line-height-h1: 2.5rem;
	--font-size-h2: 1.5rem; /* 24/32 */
	--line-height-h2: 2rem;
	--font-size-h3: 1.25rem; /* 20/28 */
	--line-height-h3: 1.75rem;
	--font-size-body: 1rem; /* 16/26 */
	--line-height-body: 1.625rem;
	--font-size-small: 0.875rem; /* 14/22 */
	--line-height-small: 1.375rem;
	--font-size-label: 0.8125rem; /* 13/16, 600, +0.02em */
	--line-height-label: 1rem;
	--letter-spacing-label: 0.02em;
	--font-size-price: 1.375rem; /* 22/28, 700 */
	--line-height-price: 1.75rem;
	--font-size-button: 1.1875rem; /* 19/24, 700 */
	--line-height-button: 1.5rem;
	--font-size-hero: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); /* page-hero H1 only */
	--line-height-hero: 1.05;
	--letter-spacing-hero: -0.5px; /* never on Arabic */

	/* Component metrics (0A.2 measurements from the v1.1 file) */
	--border-width: 1px;
	--border-width-field: 1.5px; /* inputs, checkboxes: 3:1 with --color-ink-muted (0A.5 #8) */
	--border-width-strong: 2px;
	--button-padding: 16px 32px; /* primary (Rumba) */
	--button-secondary-padding: 15px 26px; /* 2px Prussian outline */
	--button-compact-padding: 8px 16px; /* compact "Add" */
	--tag-padding: 6px 13px; /* pills and tags (5–7 × 12–15) */
	--header-padding-block: 18px; /* header 18 × 40 (inline = --gutter, max 40) */
	--header-height: 80px; /* sticky offset for anchors */
	--touch-target: 44px;
	--character-size-sm: 56px; /* character badge circles 52–58 */
	--character-size-md: 112px;
	--character-size-lg: 168px;
	--character-border: 4px; /* peach border on character circles */
	--icon-size: 20px;
	--icon-circle: 40px; /* social and icon circles */
	--sticky-bar-height: 80px; /* mobile sticky add-to-cart bar (shop) */
	--float-gap: 16px; /* floating WhatsApp button inset */
	--content-size: 760px;
	--z-header: 50;
	--z-float: 60;
	--z-notice: 70;

	/* Focus */
	--focus-ring: 0 0 0 2px var(--color-peach), 0 0 0 4px var(--color-prussian);
	--focus-ring-on-dark: 0 0 0 2px var(--color-prussian), 0 0 0 4px var(--color-peach);

	/* Motion */
	--motion-float: popfloat 4s ease-in-out infinite; /* character badges only */
	--motion-fast: 150ms ease-out;
}

:root[lang="ar"],
[dir="rtl"] {
	--font-heading: "Baloo Bhaijaan 2", "Baloo 2", ui-rounded, sans-serif;
	--font-body: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
	--letter-spacing-hero: 0;
	--letter-spacing-label: 0;
}

/* English inside an Arabic page (e.g. the language switch) */
[dir="ltr"][lang^="en"] {
	--font-heading: "Baloo 2", "Baloo Bhaijaan 2", ui-rounded, sans-serif;
	--font-body: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--motion-float: none;
		--motion-fast: 0ms linear;
	}
}

@keyframes popfloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}