/* ==========================================================================
   Viyana Brief — Design tokens
   Source: approved Viyana identity (navy #041335, orange #F3722B,
   Montserrat for English, Cairo for Arabic).
   ========================================================================== */
:root {
	/* Brand */
	--vb-navy: #041335;
	--vb-navy-700: #06205B;          /* logo wordmark */
	--vb-orange: #F3722B;
	--vb-orange-600: #E05E1A;        /* hover / pressed */
	--vb-orange-050: rgba(243, 114, 43, 0.07);
	--vb-orange-ring: rgba(243, 114, 43, 0.20);

	/* Neutrals */
	--vb-bg: #F5F7FA;
	--vb-surface: #FFFFFF;
	--vb-surface-2: #F8FAFC;
	--vb-heading: #041335;
	--vb-text: #4A5568;
	--vb-muted: #718096;
	--vb-placeholder: #A0AEC0;
	--vb-border: #CBD5E0;
	--vb-border-soft: #E2E8F0;

	/* Status */
	--vb-success: #2F855A;
	--vb-success-bg: #F0FFF4;
	--vb-error: #E53E3E;
	--vb-error-bg: #FFF5F5;

	/* Typography */
	--vb-font-en: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--vb-font-ar: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
	--vb-font: var(--vb-font-en);
	--vb-text-sm: 13px;
	--vb-text-base: 15px;
	--vb-text-md: 16px;
	--vb-lh: 1.6;
	--vb-lh-heading: 1.3;
	--vb-tracking-caps: 0.06em;

	/* Shape & depth */
	--vb-radius-sm: 6px;
	--vb-radius: 8px;
	--vb-radius-lg: 12px;
	--vb-radius-pill: 999px;
	--vb-shadow-sm: 0 1px 2px rgba(4, 19, 53, 0.04), 0 2px 8px rgba(4, 19, 53, 0.06);
	--vb-shadow-md: 0 4px 16px rgba(4, 19, 53, 0.10);
	--vb-focus: 0 0 0 3px var(--vb-orange-ring);

	/* Layout */
	--vb-doc-width: 820px;           /* comfortable width for long questionnaires */
	--vb-wide-width: 1200px;         /* header / footer */
	--vb-gutter: clamp(16px, 4vw, 32px);
	--vb-header-h: 72px;
	--vb-control-h: 48px;
	--vb-ease: 180ms ease;
}

/* Arabic: switch the whole system to Cairo with Arabic-friendly rhythm. */
html[dir="rtl"],
body.rtl {
	--vb-font: var(--vb-font-ar);
	--vb-lh: 1.8;
	--vb-lh-heading: 1.5;
	--vb-tracking-caps: 0;
}