/*
 * Design tokens — palette pixel-sampled from the Nuqta Care logo
 * (deep teal -> sage green, warm coral accent, cream background).
 * Deliberately NOT the reference site's violet (#7A70FA) — different brand.
 */
:root {
	/* Brand */
	--color-primary: #1E6E63;
	--color-primary-dark: #123F39;
	--color-secondary: #86B79B;
	--color-secondary-light: #DCEEE3;
	--color-accent: #F0965A;
	--color-accent-dark: #D97A3C;

	/* Neutrals */
	--color-bg: #FAF8F3;
	--color-bg-alt: #F1EEE4;
	--color-surface: #FFFFFF;
	--color-text: #16302C;
	--color-text-muted: #4B615D;
	--color-border: #E3DFD3;

	/* State */
	--color-success: #3E8E5A;
	--color-error: #C0392B;

	/* RGB triplets for brand colors — lets rgba(var(--color-x-rgb), N)
	   opacity-variant shadows/overlays follow the Design Settings color
	   pickers (§Batch J), since a CSS custom property holding a hex
	   string can't be decomposed into channels at compute time. */
	--color-primary-rgb: 30, 110, 99;
	--color-accent-rgb: 240, 150, 90;
	--color-text-rgb: 22, 48, 44;

	/* Text placed on a solid brand-color background — tracks whichever
	   brand color it's paired with, not independently editable. */
	--color-on-brand: #FFFFFF;

	/* Footer palette — a tinted extension of --color-primary-dark (the
	   footer's own background), not an independent brand decision. */
	--color-footer-text: #EAF3F0;
	--color-footer-text-muted: #C9DDD7;
	--color-footer-text-dim: #A9C7BF;
	--color-footer-border: #3C6A61;

	/* Form notice backgrounds — tinted extensions of --color-success /
	   --color-error. */
	--color-notice-success-bg: #E4F5E9;
	--color-notice-error-bg: #FBEAE8;

	/* WhatsApp's own brand green — tokenized for CSS hygiene only, never
	   exposed as an editable color (changing it away from WhatsApp's
	   actual brand color would look broken, not "more customizable"). */
	--color-whatsapp: #25D366;

	/* Typography */
	--font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
	--font-size-h1: clamp(1.9rem, 1.5rem + 2vw, 3rem);       /* 48px desktop */
	--font-size-h2: clamp(1.6rem, 1.3rem + 1.5vw, 2.375rem); /* 38px desktop */
	--font-size-h3: clamp(1.3rem, 1.1rem + 1vw, 1.625rem);   /* 26px desktop */

	/* Spacing (4px base) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;

	/* Radius */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-pill: 999px;

	/* Shadow */
	--shadow-card: 0 8px 24px rgba(30, 110, 99, 0.08);
	--shadow-card-hover: 0 12px 32px rgba(30, 110, 99, 0.14);
	--shadow-header-scrolled: 0 2px 12px rgba(var(--color-primary-rgb), 0.06);

	/* Containers / breakpoints (referenced in media queries as literals,
	   custom properties can't be used inside @media conditions) */
	--container-max: 1140px;
	--content-max-width: 960px;

	/* Reference-matched rhythm (acesaudi.org layout-fidelity pass) */
	--gap-default: 20px;
	--gap-extended: 30px;
	--rhythm-widget: 20px;
	--radius-card-ref: 5px;
	--radius-card-alt: 10px;
	--header-h-desktop: 120px;
	--header-h-sticky: 65px;
	--header-h-tablet: 60px;

	/* Header logo height — admin-editable via Design Settings → header tab
	   (inc/theme-settings.php: header_logo_height). Scrolled state is always
	   0.625x the normal state (see inc/design-output.php), never
	   independently editable, so both stay visually coherent. */
	--logo-h-normal: 64px;
	--logo-h-scrolled: 40px;
}