/*
 * SyanahPro tokens.css — GENERATED by themes-build/bin (token compiler). DO NOT EDIT BY HAND.
 * Token contract version: 2. Source: themes-build/tokens.json + presets/.
 * Build-time only — no Node at runtime. Cascade base layer (Blueprint §7.3):
 * base -> theme preset (here) -> tenant brand (pf-themes injects AFTER) -> section override.
 */

:root {
	--pf-dir-start: right;
	--pf-dir-end: left;

	/* color — light scheme (default) */
	--pf-color-surface: #fbfbfd;
	--pf-color-surface-raised: #ffffff;
	--pf-color-on-surface: #16182a;
	--pf-color-primary: #2c3a8c;
	--pf-color-on-primary: #ffffff;
	--pf-color-accent: #e8902a;
	--pf-color-on-accent: #1b1306;
	--pf-color-success: #1d6b3a;
	--pf-color-warning: #8a5a00;
	--pf-color-danger: #b3261e;
	--pf-color-muted: #5b6a66;
	--pf-color-border: #8289b4;

	/* neutral ramp (light) — an ungated 0-900 scale, not fg/bg role pairs */
	--pf-color-neutral-0: #ffffff;
	--pf-color-neutral-50: #f6f8f9;
	--pf-color-neutral-100: #eef1f3;
	--pf-color-neutral-200: #e2e8ec;
	--pf-color-neutral-300: #cbd4da;
	--pf-color-neutral-400: #9fadb6;
	--pf-color-neutral-500: #73828c;
	--pf-color-neutral-600: #566069;
	--pf-color-neutral-700: #3d454c;
	--pf-color-neutral-800: #262c31;
	--pf-color-neutral-900: #13191d;

	/* brand-utility tints (light) — derived from role vars via color-mix, so they re-tint per brand */
	--pf-color-hairline: var(--pf-color-neutral-200);
	--pf-color-primary-soft: color-mix(in srgb, var(--pf-color-primary) 12%, transparent);
	--pf-color-accent-soft: color-mix(in srgb, var(--pf-color-accent) 14%, transparent);
	--pf-color-overlay: rgba(9, 18, 30, 0.55);
	--pf-color-focus-ring: color-mix(in srgb, var(--pf-color-primary) 40%, transparent);
	--pf-color-secondary: #5e6bb8;

	/* gradients — reference role vars so they re-tint per brand */
	--pf-gradient-brand: linear-gradient(135deg, var(--pf-color-primary) 0%, color-mix(in srgb, var(--pf-color-primary) 70%, var(--pf-color-accent)) 100%);
	--pf-gradient-hero-veil: linear-gradient(180deg, rgba(9, 18, 30, 0) 0%, var(--pf-color-overlay) 100%);
	--pf-gradient-sheen: linear-gradient(120deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 40%);
	--pf-gradient-subtle: linear-gradient(180deg, var(--pf-color-surface-raised), var(--pf-color-surface));
	--pf-gradient-signal: radial-gradient(circle at center, color-mix(in srgb, var(--pf-color-accent) 22%, transparent) 0%, transparent 70%);

	/* Keystone-notch primitives (LOGO/hero-only — never on UI cards) */
	--pf-notch-width: 1.25rem;
	--pf-notch-depth: 1rem;
	--pf-notch-offset: 1.5rem;
	--pf-notch-radius: var(--pf-radius-sm);

	/* amber status-LED treatment (3:1 ring + capped pulse trough — keeps a fill-only live signal AA) */
	--pf-signal-ring-width: 2px;
	--pf-signal-ring-color: color-mix(in srgb, var(--pf-color-accent) 55%, var(--pf-color-on-surface));
	--pf-signal-pulse-trough: 0.6;

	/* typography */
	--pf-font-arabic: "IBM Plex Sans Arabic", "Noto Kufi Arabic", "Tajawal", "Segoe UI", system-ui, -apple-system, sans-serif;
	--pf-font-latin: "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--pf-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Consolas", monospace;
	--pf-font-display: "Almarai", "IBM Plex Sans Arabic", "Noto Kufi Arabic", "Tajawal", "Segoe UI", system-ui, -apple-system, sans-serif;
	--pf-font-size-xs: 0.75rem;
	--pf-font-size-sm: 0.875rem;
	--pf-font-size-base: 1rem;
	--pf-font-size-md: 1.125rem;
	--pf-font-size-lg: 1.375rem;
	--pf-font-size-xl: 1.75rem;
	--pf-font-size-2xl: 2.25rem;
	--pf-font-size-3xl: 3rem;
	--pf-font-size-4xl: 3.75rem;
	--pf-font-size-5xl: 4.5rem;
	--pf-display-d1: clamp(2.5rem, 6vw, 4.5rem);
	--pf-display-d2: clamp(2rem, 4.5vw, 3.25rem);
	--pf-display-d3: clamp(1.6rem, 3vw, 2.25rem);
	--pf-font-weight-regular: 400;
	--pf-font-weight-medium: 500;
	--pf-font-weight-semibold: 600;
	--pf-font-weight-bold: 700;
	--pf-font-weight-black: 800;
	--pf-line-height-display: 1.08;
	--pf-line-height-tight: 1.25;
	--pf-line-height-snug: 1.4;
	--pf-line-height-normal: 1.7;
	--pf-line-height-relaxed: 1.85;
	--pf-letter-spacing-tighter: -0.02em;
	--pf-letter-spacing-normal: 0;
	--pf-letter-spacing-tight: -0.01em;
	--pf-letter-spacing-wide: 0.02em;
	--pf-numeral-mode: latn;

	/* spacing (4/8 scale) */
	--pf-space-0: 0;
	--pf-space-1: 0.25rem;
	--pf-space-2: 0.5rem;
	--pf-space-3: 0.75rem;
	--pf-space-4: 1rem;
	--pf-space-5: 1.5rem;
	--pf-space-6: 2rem;
	--pf-space-7: 3rem;
	--pf-space-8: 4rem;
	--pf-space-9: 6rem;
	--pf-space-10: 8rem;

	/* radius */
	--pf-radius-none: 0;
	--pf-radius-sm: 0.375rem;
	--pf-radius-md: 0.625rem;
	--pf-radius-lg: 1rem;
	--pf-radius-xl: 1.5rem;
	--pf-radius-pill: 999px;

	/* elevation / shadow (light scheme; dark re-tint emitted below) */
	--pf-shadow-none: none;
	--pf-shadow-xs: 0 1px 2px rgba(13, 27, 42, 0.06);
	--pf-shadow-sm: 0 2px 6px rgba(13, 27, 42, 0.08);
	--pf-shadow-md: 0 8px 24px rgba(13, 27, 42, 0.10);
	--pf-shadow-lg: 0 16px 48px rgba(13, 27, 42, 0.14);
	--pf-shadow-xl: 0 28px 70px rgba(13, 27, 42, 0.18);
	--pf-shadow-focus: 0 0 0 3px var(--pf-color-focus-ring);

	/* motion */
	--pf-duration-fast: 120ms;
	--pf-duration-base: 200ms;
	--pf-duration-slow: 360ms;
	--pf-duration-deliberate: 520ms;
	--pf-easing-standard: cubic-bezier(0.2, 0, 0, 1);
	--pf-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
	--pf-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--pf-easing-entrance: cubic-bezier(0.16, 1, 0.3, 1);

	/* borders */
	--pf-border-width-hairline: 1px;
	--pf-border-width-thick: 2px;
	--pf-border-width-heavy: 3px;
	--pf-border-style: solid;

	/* layout */
	--pf-content-size: 44rem;
	--pf-wide-size: 75rem;
	--pf-gutter: 1.5rem;
	--pf-grid-columns: 12;

	/* breakpoints (for JS/container hooks; media queries are static below) */
	--pf-bp-mobile: 480px;
	--pf-bp-tablet: 768px;
	--pf-bp-laptop: 1024px;
	--pf-bp-desktop: 1280px;

	/* z-index */
	--pf-z-base: 0;
	--pf-z-dropdown: 100;
	--pf-z-sticky: 200;
	--pf-z-overlay: 300;
	--pf-z-modal: 400;
	--pf-z-toast: 500;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-pf-scheme="light"]) {
		--pf-color-surface: #0c0e1a;
		--pf-color-surface-raised: #141729;
		--pf-color-on-surface: #eceefa;
		--pf-color-primary: #8e9bf0;
		--pf-color-on-primary: #0c0e1a;
		--pf-color-accent: #f4a33f;
		--pf-color-on-accent: #1b1306;
		--pf-color-success: #67d28a;
		--pf-color-warning: #e6c14e;
		--pf-color-danger: #f3897f;
		--pf-color-muted: #a4b2ad;
		--pf-color-border: #646c99;
		--pf-color-neutral-0: #0b0f12;
		--pf-color-neutral-50: #11161a;
		--pf-color-neutral-100: #161d22;
		--pf-color-neutral-200: #1d262c;
		--pf-color-neutral-300: #2a363d;
		--pf-color-neutral-400: #3e4c55;
		--pf-color-neutral-500: #5d6b74;
		--pf-color-neutral-600: #859399;
		--pf-color-neutral-700: #aab6bd;
		--pf-color-neutral-800: #d2dadf;
		--pf-color-neutral-900: #eef3f5;
		--pf-color-hairline: var(--pf-color-neutral-300);
		--pf-color-overlay: rgba(2, 6, 14, 0.66);
		--pf-color-secondary: #6b77c9;
		--pf-shadow-none: none;
		--pf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
		--pf-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
		--pf-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.50);
		--pf-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
		--pf-shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.60);
		--pf-shadow-focus: 0 0 0 3px var(--pf-color-focus-ring);
	}
}

[data-pf-scheme="dark"] {
	--pf-color-surface: #0c0e1a;
	--pf-color-surface-raised: #141729;
	--pf-color-on-surface: #eceefa;
	--pf-color-primary: #8e9bf0;
	--pf-color-on-primary: #0c0e1a;
	--pf-color-accent: #f4a33f;
	--pf-color-on-accent: #1b1306;
	--pf-color-success: #67d28a;
	--pf-color-warning: #e6c14e;
	--pf-color-danger: #f3897f;
	--pf-color-muted: #a4b2ad;
	--pf-color-border: #646c99;
	--pf-color-neutral-0: #0b0f12;
	--pf-color-neutral-50: #11161a;
	--pf-color-neutral-100: #161d22;
	--pf-color-neutral-200: #1d262c;
	--pf-color-neutral-300: #2a363d;
	--pf-color-neutral-400: #3e4c55;
	--pf-color-neutral-500: #5d6b74;
	--pf-color-neutral-600: #859399;
	--pf-color-neutral-700: #aab6bd;
	--pf-color-neutral-800: #d2dadf;
	--pf-color-neutral-900: #eef3f5;
	--pf-color-hairline: var(--pf-color-neutral-300);
	--pf-color-overlay: rgba(2, 6, 14, 0.66);
	--pf-color-secondary: #6b77c9;
	--pf-shadow-none: none;
	--pf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
	--pf-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
	--pf-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.50);
	--pf-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
	--pf-shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.60);
	--pf-shadow-focus: 0 0 0 3px var(--pf-color-focus-ring);
}

/* Hero art-direction hooks (brand-agnostic — driven by theme.hero + data-pf-hero-* attributes). */
[data-pf-hero] {
	--pf-hero-overlay: 0.45;
	--pf-hero-media-ratio: 16/9;
	position: relative;
	background-image: var(--pf-gradient-subtle);
}
[data-pf-hero-pattern="sadu"]::before,
[data-pf-hero-pattern="grid"]::before,
[data-pf-hero-pattern="dots"]::before,
[data-pf-hero-pattern="lattice"]::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.06;
	z-index: 0;
}
[data-pf-hero-pattern="lattice"]::before {
	background-image:
		repeating-linear-gradient(0deg, var(--pf-color-border) 0 1px, transparent 1px var(--pf-space-6)),
		repeating-linear-gradient(90deg, var(--pf-color-border) 0 1px, transparent 1px var(--pf-space-6));
}
[data-pf-hero-veil]::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: var(--pf-gradient-hero-veil);
	z-index: 0;
}

/* Bridge: WordPress preset variables inherit the PF tokens (so core + WooCommerce blocks follow the cascade). */
:root {
	--wp--preset--color--surface: var(--pf-color-surface);
	--wp--preset--color--surface-raised: var(--pf-color-surface-raised);
	--wp--preset--color--on-surface: var(--pf-color-on-surface);
	--wp--preset--color--primary: var(--pf-color-primary);
	--wp--preset--color--on-primary: var(--pf-color-on-primary);
	--wp--preset--color--accent: var(--pf-color-accent);
	--wp--preset--color--on-accent: var(--pf-color-on-accent);
	--wp--preset--color--success: var(--pf-color-success);
	--wp--preset--color--warning: var(--pf-color-warning);
	--wp--preset--color--danger: var(--pf-color-danger);
	--wp--preset--color--muted: var(--pf-color-muted);
	--wp--preset--color--border: var(--pf-color-border);
	--wp--preset--font-size--xs: var(--pf-font-size-xs);
	--wp--preset--font-size--sm: var(--pf-font-size-sm);
	--wp--preset--font-size--base: var(--pf-font-size-base);
	--wp--preset--font-size--md: var(--pf-font-size-md);
	--wp--preset--font-size--lg: var(--pf-font-size-lg);
	--wp--preset--font-size--xl: var(--pf-font-size-xl);
	--wp--preset--font-size--2xl: var(--pf-font-size-2xl);
	--wp--preset--font-size--3xl: var(--pf-font-size-3xl);
	--wp--preset--font-size--4xl: var(--pf-font-size-4xl);
	--wp--preset--font-size--5xl: var(--pf-font-size-5xl);
	--wp--preset--font-family--arabic: var(--pf-font-arabic);
	--wp--preset--font-family--latin: var(--pf-font-latin);
	--wp--preset--font-family--mono: var(--pf-font-mono);
	--wp--preset--font-family--display: var(--pf-font-display);
	--wp--preset--spacing--0: var(--pf-space-0);
	--wp--preset--spacing--1: var(--pf-space-1);
	--wp--preset--spacing--2: var(--pf-space-2);
	--wp--preset--spacing--3: var(--pf-space-3);
	--wp--preset--spacing--4: var(--pf-space-4);
	--wp--preset--spacing--5: var(--pf-space-5);
	--wp--preset--spacing--6: var(--pf-space-6);
	--wp--preset--spacing--7: var(--pf-space-7);
	--wp--preset--spacing--8: var(--pf-space-8);
	--wp--preset--spacing--9: var(--pf-space-9);
	--wp--preset--spacing--10: var(--pf-space-10);
	--wp--preset--shadow--none: var(--pf-shadow-none);
	--wp--preset--shadow--xs: var(--pf-shadow-xs);
	--wp--preset--shadow--sm: var(--pf-shadow-sm);
	--wp--preset--shadow--md: var(--pf-shadow-md);
	--wp--preset--shadow--lg: var(--pf-shadow-lg);
	--wp--preset--shadow--xl: var(--pf-shadow-xl);
	--wp--preset--shadow--focus: var(--pf-shadow-focus);
}