/* ==========================================================================
   Wejha Store — design tokens
   --------------------------------------------------------------------------
   Single source of truth for colour, spacing, radius, shadow, container and
   type scale. Brand colours are the exact values of the approved logo
   (assets/images/wejha-logo.svg). The navy/text/border/surface slots alias
   Blocksy's global palette (--theme-palette-color-1…8, set in the Customizer
   by bin/theme-config.sh) so the Customizer stays the place to tune them;
   the three accents are not palette slots and live here.

   Usage philosophy (from the brand brief):
     navy   → primary actions, headings, navigation, important UI
     teal   → secondary interactive accent
     yellow → small highlights / promotional accents
     coral  → small emphasis / sale-related accent
     white  → main storefront background
   Contrast: teal and coral fail AA as text on white, so their *-text
   variants are darkened for text/icons; the raw values are for fills,
   borders and decoration. Yellow is never used as text.
   ========================================================================== */
:root {
	/* Brand */
	--wejha-navy: #05305a;
	--wejha-navy-deep: #03223f;
	--wejha-teal: #02aab1;
	--wejha-teal-text: #047a80;
	--wejha-teal-soft: #e3f6f7;
	--wejha-yellow: #fdb01a;
	--wejha-yellow-soft: #fff3d6;
	--wejha-red: #ef4747;
	--wejha-red-text: #cf2f2f;
	--wejha-red-soft: #fde5e5;

	/* Warm neutrals + tints (Homepage V2): the page is a warm near-white, sections alternate between
	   white, very soft yellow / teal / coral / navy / lavender tints — never flat colour boxes everywhere. */
	--wejha-cream: #fffdfc;          /* page background (also Blocksy palette slot 7, seeded by bin/theme-config.sh) */
	--wejha-sand: #f7f3ec;           /* warm neutral surface */
	--wejha-stage: #f4f1ec;          /* product-image stage (cards, tiles) */
	--wejha-stage-hover: #ede8e0;
	--wejha-tint-yellow: #fff6df;
	--wejha-tint-yellow-2: #ffedbf;
	--wejha-tint-teal: #e6f6f7;
	--wejha-tint-teal-2: #cfeff0;
	--wejha-tint-coral: #fdeae6;
	--wejha-tint-coral-2: #ffd9d1;
	--wejha-tint-navy: #e9eef5;
	--wejha-tint-lavender: #eeecf7;
	--wejha-tint-lavender-2: #e2dff2;
	--wejha-tint-mint: #e8f5ec;

	/* Semantic (palette-backed where Blocksy has a slot) */
	--wejha-primary: var(--theme-palette-color-1, var(--wejha-navy));
	--wejha-primary-hover: var(--theme-palette-color-2, var(--wejha-navy-deep));
	--wejha-accent-teal: var(--wejha-teal);
	--wejha-accent-yellow: var(--wejha-yellow);
	--wejha-accent-red: var(--wejha-red);
	--wejha-text: var(--theme-palette-color-3, #1e2a3b);
	--wejha-heading: var(--theme-palette-color-4, var(--wejha-navy));
	--wejha-text-muted: #5b6b7f;
	--wejha-text-on-primary: #ffffff;
	--wejha-border: var(--theme-palette-color-5, #e3e8ef);
	--wejha-surface: var(--theme-palette-color-6, #f5f7fa);
	--wejha-background: var(--theme-palette-color-7, var(--wejha-cream));
	--wejha-white: var(--theme-palette-color-8, #ffffff);
	--wejha-focus-ring: var(--wejha-teal);

	/* Spacing scale (4px base) */
	--wejha-space-1: 0.25rem;
	--wejha-space-2: 0.5rem;
	--wejha-space-3: 0.75rem;
	--wejha-space-4: 1rem;
	--wejha-space-5: 1.5rem;
	--wejha-space-6: 2rem;
	--wejha-space-7: 3rem;
	--wejha-space-8: 4rem;
	--wejha-space-9: 5.5rem;

	/* Vertical rhythm between homepage sections (mobile → desktop) */
	--wejha-section-gap: 3.5rem;      /* 56px */
	--wejha-band-pad: 3rem;           /* 48px */

	/* Radius */
	--wejha-radius-sm: 6px;
	--wejha-radius-md: 10px;
	--wejha-radius-lg: 16px;
	--wejha-radius-xl: 20px;   /* product cards, category tiles, bundle cards */
	--wejha-radius-2xl: 24px;  /* campaign banner */
	--wejha-radius-3xl: 28px;  /* full-bleed hero surface */
	--wejha-radius-pill: 999px;

	/* Shadows (soft, navy-tinted) */
	--wejha-shadow-sm: 0 1px 2px rgba(5, 48, 90, 0.08), 0 1px 6px rgba(5, 48, 90, 0.06);
	--wejha-shadow-md: 0 6px 20px rgba(5, 48, 90, 0.10);
	--wejha-shadow-lg: 0 16px 40px rgba(5, 48, 90, 0.14);
	--wejha-shadow-card: 0 10px 30px rgba(5, 48, 90, 0.08);

	/* Containers (Blocksy owns the real value: Customizer → Layout → Site width) */
	--wejha-container: var(--theme-normal-container-max-width, 1280px);
	--wejha-container-narrow: 860px;
	/* Side gutter = what Blocksy leaves beside its container: Blocksy's --theme-container-edge-spacing is the
	   container WIDTH (90vw), not a spacing value. */
	--wejha-gutter: calc((100vw - min(var(--wejha-container), var(--theme-container-edge-spacing, 90vw))) / 2);

	/* Type scale (rem; Blocksy sets the root font-size/family from the Customizer) */
	--wejha-font: var(--theme-font-family, "IBM Plex Sans Arabic", "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif); /* the family itself is self-hosted: assets/css/fonts.css */
	--wejha-text-xs: 0.8125rem;
	--wejha-text-sm: 0.875rem;
	--wejha-text-md: 1rem;
	--wejha-text-lg: 1.125rem;
	--wejha-text-xl: 1.375rem;
	--wejha-text-2xl: 1.75rem;
	--wejha-text-3xl: 2.25rem;
	--wejha-text-4xl: 2.75rem;
	--wejha-text-5xl: 3.25rem;
	--wejha-leading-tight: 1.3;
	--wejha-leading: 1.7;

	/* Component sizes */
	--wejha-control-height: 44px;   /* buttons, inputs, touch targets */
	--wejha-icon: 20px;

	/* Hand Blocksy's own variables our values, so its buttons/forms/header follow the tokens
	   without re-styling Blocksy's markup. */
	--theme-button-border-radius: var(--wejha-radius-md);
	--theme-button-min-height: var(--wejha-control-height);
	--theme-button-font-weight: 500;
	--theme-form-field-border-radius: var(--wejha-radius-md);
	--theme-form-field-height: var(--wejha-control-height);
	--theme-form-field-border-initial-color: var(--wejha-border);
	--theme-form-field-border-focus-color: var(--wejha-teal);
	--theme-border-radius: var(--wejha-radius-md);
	--theme-link-hover-color: var(--wejha-teal-text);
}

@media (min-width: 1000px) {
	:root {
		--wejha-section-gap: 5.5rem;  /* 88px */
		--wejha-band-pad: 4.5rem;     /* 72px */
	}
}