/*
 * Design tokens for LegalPro.
 * Color system, typography and spacing come directly from the project's
 * brand bible — nothing here is a generic default.
 *
 * FONT SYSTEM — two-family pairing:
 *   - Sahel  → headings only (h1–h6): a distinctive, high-contrast Persian
 *     display face that gives titles a formal, premium presence.
 *   - Vazirmatn → body copy, paragraphs, nav, buttons and form controls: a
 *     highly legible, professional workhorse face already used by Iranian
 *     government, banking and legal sites for exactly this reason.
 * IRANYekanX stays as the shared fallback if either webfont fails to load.
 * No font files are bundled in this package (Sahel and Vazirmatn are both
 * free/SIL-licensed) — see README.md for exact download sources; nothing
 * renders in either face until you add the corresponding .woff2 files
 * under assets/fonts/.
 */

@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: 'Sahel';
	src: url('../fonts/Sahel-Regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Sahel';
	src: url('../fonts/Sahel-Bold.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: 'Sahel';
	src: url('../fonts/Sahel-Black.woff2') format('woff2');
	font-weight: 900;
	font-display: swap;
}

@font-face {
	font-family: 'IRANYekanX';
	src: url('../fonts/IRANYekanXFaNum-Regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'IRANYekanX';
	src: url('../fonts/IRANYekanXFaNum-Medium.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'IRANYekanX';
	src: url('../fonts/IRANYekanXFaNum-Bold.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Variable.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

:root {
	/* Color system */
	--color-primary: #111827;

	/* Accent — navy/steel blue (previously gold). Variable names kept as
	   -gold- throughout the codebase for zero-risk compatibility with
	   every existing rule; only the values changed. --color-gold is the
	   main accent (buttons, active states, icon fills on light
	   backgrounds); --color-gold-light is deliberately brighter so it
	   stays readable as a hover color on the dark navy header/footer
	   (where the darker variants would blend in); --color-gold-dark is
	   for depth in gradients. */
	--color-gold: #2F5C93;
	--color-gold-light: #6E93C4;
	--color-gold-dark: #1F3F6B;

	/* Small readable text (links, labels) on light backgrounds — the
	   main accent already clears WCAG AA here, but this stays as the
	   dedicated "definitely passes" variant other rules already point
	   to. Dark backgrounds (navy footer/header) use --color-gold-light
	   instead, not this one. */
	--color-gold-text: #1F3F6B;
	--color-bg: #FAFAFA;
	--color-card: #FFFFFF;
	--color-text: #222222;
	--color-border: #E5E7EB;
	--color-success: #10B981;
	--color-warning: #F59E0B;
	--color-danger: #EF4444;
	--color-info: #3B82F6;

	--color-text-muted: #6B7280;
	--color-primary-tint: #1F2937;

	/* Typography
	   --font-fa is the body/UI face (paragraphs, nav, buttons, forms) —
	   name kept as -fa- for zero-risk compatibility with every existing
	   rule that already reads it; only --font-heading is new.
	   --font-heading is used ONLY by headings (h1–h6, see base.css). */
	--font-fa: 'Vazirmatn', 'IRANYekanX', sans-serif;
	--font-heading: 'Sahel', 'Vazirmatn', 'IRANYekanX', sans-serif;
	--font-en: 'Inter', sans-serif;

	--fs-h1: clamp(1.85rem, 1.4rem + 2vw, 3rem);
	--fs-h2: clamp(1.35rem, 1.15rem + 1vw, 1.8rem);
	--fs-h3: 1.05rem;
	--fs-h4: 1rem;
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-caption: 0.75rem;
	--fs-eyebrow: 0.8rem;

	/* Headings run tighter (premium, formal display feel) than the very
	   open, easy-reading body line-height below. */
	--lh-heading: 1.3;
	--lh-heading-tight: 1.15;
	--lh-body: 1.85;
	--tracking-tight: -0.015em;
	--tracking-tighter: -0.02em;
	--tracking-wide: 0.06em;

	/* Spacing scale */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.5rem;
	--space-6: 4rem;
	--space-7: 6rem;

	/* Layout */
	--container-max: 1200px;
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 22px;
	--radius-full: 999px;

	/* Header stays a fixed dark navy regardless of the light/dark toggle —
	   a constant brand anchor, like a law firm's letterhead band. */
	--color-header-bg: #111827;

	/* Elevation: soft, layered, low-contrast shadows for a refined,
	   not "boxy", sense of depth. */
	--shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);
	--shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.06);
	--shadow-card: 0 1px 2px rgba(17, 24, 39, 0.04), 0 12px 28px -8px rgba(17, 24, 39, 0.10);
	--shadow-lift: 0 20px 40px -16px rgba(17, 24, 39, 0.22);
	--shadow-gold: 0 10px 24px -10px rgba(47, 92, 147, 0.45);

	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--transition-fast: 0.15s var(--ease-standard);
	--transition-base: 0.25s var(--ease-standard);

	color-scheme: light;
}

/* Dark mode: same gold accent, inverted neutrals, no other hue changes. */
:root[data-theme='dark'] {
	--color-bg: #0B0D12;
	--color-card: #14171F;
	--color-text: #EDEDED;
	--color-text-muted: #9CA3AF;
	--color-border: #262A34;
	--color-primary: #F9FAFB;
	--color-primary-tint: #E5E7EB;
	--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -8px rgba(0, 0, 0, 0.45);
	--shadow-lift: 0 20px 40px -16px rgba(0, 0, 0, 0.55);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--color-bg: #0B0D12;
		--color-card: #14171F;
		--color-text: #EDEDED;
		--color-text-muted: #9CA3AF;
		--color-border: #262A34;
		--color-primary: #F9FAFB;
		--color-primary-tint: #E5E7EB;
		--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -8px rgba(0, 0, 0, 0.45);
		--shadow-lift: 0 20px 40px -16px rgba(0, 0, 0, 0.55);
		color-scheme: dark;
	}
}