/**
 * OnOff design tokens — RTL-first (logical properties throughout)
 */

:root {
	/* Typography — Arabic primary */
	--onoff-font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
	--onoff-font-size-base: 1.0625rem;
	--onoff-font-size-sm: 0.9375rem;
	--onoff-font-size-lg: 1.1875rem;
	--onoff-line-height: 1.75;
	--onoff-line-height-heading: 1.35;

	/* Brand palette */
	--onoff-color-primary: #0c4a4e;
	--onoff-color-primary-dark: #083538;
	--onoff-color-primary-light: #136b72;
	--onoff-color-accent: #c4a035;
	--onoff-color-nav-active: #f2fb04;
	--onoff-color-accent-hover: #a88628;

	--onoff-color-bg: #f8f6f2;
	--onoff-color-surface: #ffffff;
	--onoff-color-surface-elevated: #ffffff;
	--onoff-color-border: #e7e2d9;
	--onoff-color-border-strong: #d4cdc0;

	--onoff-color-text: #1a1814;
	--onoff-color-text-muted: #5c574f;
	--onoff-color-text-inverse: #ffffff;

	/* Breakpoints (for reference in media queries) */
	--onoff-bp-lg: 1024px;
	--onoff-bp-xlg: 1280px;

	/* Layout */
	--onoff-container: 1200px;
	--onoff-container-narrow: 48rem;
	--onoff-gutter: clamp(1rem, 4vw, 2rem);
	--onoff-gap-sm: 0.5rem;
	--onoff-gap-md: 1rem;
	--onoff-gap-lg: 1.5rem;
	--onoff-gap-xl: 2.5rem;

	--onoff-header-height: 4.5rem;
	--onoff-radius-sm: 6px;
	--onoff-radius: 12px;
	--onoff-radius-lg: 20px;

	--onoff-shadow-sm: 0 1px 2px rgba(26, 24, 20, 0.06);
	--onoff-shadow: 0 4px 20px rgba(12, 74, 78, 0.08);
	--onoff-shadow-lg: 0 12px 40px rgba(12, 74, 78, 0.12);

	--onoff-transition: 0.2s ease;

	/* Focus ring */
	--onoff-focus-ring: 0 0 0 3px rgba(12, 74, 78, 0.35);
}

/* Future English / LTR overrides (loaded via ltr.css when locale is en) */
[dir="ltr"] {
	--onoff-line-height: 1.65;
}

/* Mobile-only design tokens (desktop values above stay unchanged) */
@media (max-width: 899px) {
	:root {
		--onoff-bp-mobile-max: 899px;
		--onoff-gutter: clamp(1rem, 4.5vw, 1.25rem);
		--onoff-gap-xl: 2rem;
		--onoff-gap-lg: 1.25rem;
		--onoff-header-height: 4rem;
		--onoff-touch-target-min: 2.75rem;
		--onoff-viewport-height: 100dvh;
		--onoff-font-size-base: clamp(1rem, 0.9625rem + 0.1875vw, 1.0625rem);
		--onoff-line-height: 1.65;
	}
}