/*
 * NeoLivis design tokens — palette taken from the NeoLivis logo.
 * Single source for brand colours, type and spacing.
 * Mirror these values in Elementor > Site Settings (Global Colors / Fonts).
 *
 * Contrast on white (cream values are within 0.3): navy 15.7, muted 7.3, violet 8.5, blue 8.1,
 * magenta 5.7, orange-text 5.3 (all pass WCAG AA). Cyan (3.2) and orange (2.6)
 * are for gradients, illustrations and large display text only.
 */
:root {
	/* Brand */
	--nl-navy: #101551;        /* wordmark: headings, body text, dark surfaces */
	--nl-navy-deep: #0A0E3A;
	--nl-cream: #FEF6EE;       /* logo background only — pages are white (DEC-015) */
	--nl-page: #FFFFFF;
	--nl-surface-alt: #F7F8FC; /* neutral cool grey for alternating sections, never pink */
	--nl-white: #FFFFFF;
	--nl-cyan: #0593D9;
	--nl-blue: #1E3EB7;
	--nl-violet: #632A99;
	--nl-magenta: #DC0876;
	--nl-magenta-text: #BC067C;
	--nl-orange: #FD7224;
	--nl-orange-text: #B4410F;
	--nl-ink: #101551;
	--nl-ink-muted: #4B4F75;
	--nl-line: #E6E9F2;
	--nl-surface-soft: #F4F6FB;

	--nl-gradient: linear-gradient(120deg, #0593D9 0%, #1E3EB7 35%, #632A99 62%, #DC0876 85%, #FD7224 100%);
	--nl-gradient-cta: linear-gradient(120deg, #1E3EB7 0%, #632A99 55%, #BC067C 100%); /* white text ≥ 6:1 */

	/* Back-compat aliases used by earlier components */
	--nl-green: var(--nl-navy);
	--nl-green-dark: var(--nl-navy-deep);
	--nl-gold: var(--nl-orange);
	--nl-gold-text: var(--nl-orange-text);

	/* Semantic */
	--nl-success: #1F7A4D;
	--nl-warning: #8A5A00;
	--nl-error: #B42318;

	/* Type */
	--nl-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
	--nl-font-body: "Inter", system-ui, sans-serif;
	--nl-font-fa: "Vazirmatn", Tahoma, sans-serif;

	/* Spacing (8pt) */
	--nl-space-1: 8px;
	--nl-space-2: 16px;
	--nl-space-3: 24px;
	--nl-space-4: 32px;
	--nl-space-6: 48px;
	--nl-space-8: 64px;

	/* Shape */
	--nl-radius-sm: 10px;
	--nl-radius-md: 16px;
	--nl-radius-lg: 24px;
	--nl-content-max: 1320px;
}

/* Persian/Arabic: Plus Jakarta Sans and Inter have no Arabic glyphs, so switch both stacks. */
html[dir="rtl"] {
	--nl-font-display: "Vazirmatn", Tahoma, sans-serif;
	--nl-font-body: "Vazirmatn", Tahoma, sans-serif;
}

body {
	background: var(--nl-page);
	color: var(--nl-ink);
	font-family: var(--nl-font-body);
}

html[dir="rtl"] body {
	font-family: var(--nl-font-fa);
}

:focus-visible {
	outline: 3px solid var(--nl-magenta);
	outline-offset: 2px;
}

/* Gradient text helper for display headings: add class "nl-gradient-text" in Elementor. */
.nl-gradient-text .elementor-heading-title,
.nl-gradient-text {
	background: var(--nl-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
}

/* Gradient button helper: add class "nl-btn-gradient" to an Elementor Button widget. */
.nl-btn-gradient .elementor-button {
	background: var(--nl-gradient-cta) !important;
	border-color: transparent !important;
	color: #FFFFFF !important;
}

.nl-btn-gradient .elementor-button:hover {
	filter: brightness(1.08);
}

/* Default Hello header (until the Theme Builder header replaces it): keep the logo at header size. */
.site-header .site-logo img,
.site-header .custom-logo {
	width: auto;
	max-height: 52px;
}

.site-header .site-description {
	display: none;
}

/* Elementor forms use the brand fonts. */
.elementor-form,
.elementor-form .elementor-field,
.elementor-form .elementor-field-label,
.elementor-form .elementor-button { font-family: var(--nl-font-body); }
.elementor-form .elementor-field-label { font-weight: 600; }
.elementor-form .elementor-field-textual { min-height: 46px; }

/* Direction-aware arrows ("View all →" points left in Persian/Arabic). */
.nl-arrow { display: inline-block; }
[dir="rtl"] .nl-arrow { transform: scaleX(-1); }