/**
 * PHAROBUILD Core — Design Tokens
 * Single source of truth for colour, typography, spacing, layout and motion.
 * Client-configurable values (fonts, logo sizing, optional colour overrides)
 * are injected at runtime and will override the defaults below.
 */

:root {
	/* ----- Brand colour ----- */
	--pb-gold-dark: #9a691a;
	--pb-gold: #d4a640;
	--pb-gold-light: #f0d47c;

	--pb-navy: #00336a;
	--pb-navy-deep: #00264f;

	--pb-ivory: #f5f1e8;
	--pb-ivory-soft: #fbf9f4;

	--pb-text: #27313b;
	--pb-text-muted: #69727a;

	--pb-border: #ddd4c4;
	--pb-white: #ffffff;

	--pb-gradient-gold: linear-gradient(135deg, #9a691a 0%, #d4a640 50%, #f0d47c 100%);

	/* Semantic roles */
	--pb-surface: var(--pb-ivory);
	--pb-surface-soft: var(--pb-ivory-soft);
	--pb-surface-dark: var(--pb-navy);
	--pb-on-dark: #eef2f7;
	--pb-on-dark-muted: #9fb2c9;
	--pb-focus-ring: #1e6bd6;

	--pb-success: #1f7a44;
	--pb-error: #b3261e;

	/* ----- Typography ----- */
	--pb-font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
	--pb-font-ar: "Cairo", "Tahoma", sans-serif;
	--pb-font-numeric: var(--pb-font-sans);

	--pb-font-display: clamp(2.75rem, 6vw, 6rem);
	--pb-font-h1: clamp(2.25rem, 5vw, 4.25rem);
	--pb-font-h2: clamp(1.85rem, 3.6vw, 3.15rem);
	--pb-font-h3: clamp(1.4rem, 2.4vw, 2.1rem);
	--pb-font-h4: clamp(1.15rem, 1.6vw, 1.4rem);

	--pb-font-body-lg: 1.125rem;
	--pb-font-body: 1rem;
	--pb-font-small: 0.875rem;
	--pb-font-caption: 0.8125rem;
	--pb-font-label: 0.75rem;

	--pb-lh-tight: 1.08;
	--pb-lh-heading: 1.16;
	--pb-lh-body: 1.65;

	--pb-tracking-tight: -0.02em;
	--pb-tracking-normal: 0;
	--pb-tracking-label: 0.14em;

	--pb-weight-regular: 400;
	--pb-weight-medium: 500;
	--pb-weight-semibold: 600;
	--pb-weight-bold: 700;

	/* ----- Layout ----- */
	--pb-container-wide: 1440px;
	--pb-container: 1280px;
	--pb-container-narrow: 860px;
	--pb-page-gutter: clamp(20px, 4vw, 64px);

	--pb-section-xl: clamp(96px, 10vw, 160px);
	--pb-section-lg: clamp(72px, 8vw, 128px);
	--pb-section-md: clamp(56px, 6vw, 96px);
	--pb-section-sm: clamp(40px, 4vw, 64px);

	--pb-grid-gap: clamp(20px, 3vw, 40px);

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

	/* ----- Surface language ----- */
	--pb-radius-sm: 2px;
	--pb-radius-md: 4px;
	--pb-radius-lg: 8px;

	--pb-border-width: 1px;
	--pb-hairline: 1px solid var(--pb-border);

	--pb-shadow-sm: 0 1px 2px rgba(0, 38, 79, 0.06);
	--pb-shadow-md: 0 12px 32px -12px rgba(0, 38, 79, 0.18);

	/* ----- Logo -----
	 * Header/footer markup is not rendered by this plugin (Elementor Pro
	 * Theme Builder owns it); these stay available as CSS custom properties
	 * so an Elementor-built header can reference the configured logo size
	 * (e.g. `height: var(--pb-logo-h)` in a widget's Custom CSS). */
	--pb-logo-h: 44px;
	--pb-logo-h-mobile: 36px;
	--pb-logo-max-w: 260px;
	/* Assumed sticky-header height, used by components that need to offset
	 * below whatever sticky header the Elementor Theme Builder produces
	 * (e.g. the Contact page's sticky intro column). */
	--pb-header-h: clamp(64px, 8vw, 92px);

	/* ----- Buttons ----- */
	--pb-btn-h: 52px;
	--pb-btn-h-sm: 42px;
	--pb-btn-h-lg: 60px;
	--pb-btn-px: 28px;
	--pb-btn-font: 0.9375rem;

	/* ----- Motion ----- */
	--pb-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--pb-dur-fast: 140ms;
	--pb-dur: 240ms;
	--pb-dur-slow: 480ms;

	/* ----- Breakpoints (reference values) ----- */
	--pb-bp-sm: 640px;
	--pb-bp-md: 768px;
	--pb-bp-lg: 1024px;
	--pb-bp-xl: 1280px;
	--pb-bp-2xl: 1536px;
}

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