/* ==========================================================================
   Boral Foundation — Design Tokens
   ========================================================================== */

@font-face {
	font-family: 'SolaimanLipi';
	src: url('../fonts/SolaimanLipi.woff2') format('woff2'),
		url('../fonts/SolaimanLipi.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Color — brand */
	--color-primary: #086B3D;
	--color-primary-dark: #064C2D;
	--color-primary-light: #0E8A4F;
	--color-accent: #E8AD2F;
	--color-accent-dark: #C4900F;

	/* Color — surface */
	--color-background: #F5F8F6;
	--color-surface: #FFFFFF;
	--color-surface-alt: #EEF4F1;

	/* Color — text */
	--color-text: #101A16;
	--color-muted: #66736D;
	--color-on-primary: #FFFFFF;
	--color-on-accent: #101A16;

	/* Color — utility */
	--color-border: #DCE5E0;
	--color-border-strong: #C3D0C9;
	--color-success: #16864A;
	--color-success-bg: #E6F4EC;
	--color-danger: #C53B3B;
	--color-danger-bg: #FBEAEA;
	--color-warning: #B8860B;
	--color-warning-bg: #FCF3DA;
	--color-info: #1E6FA6;
	--color-info-bg: #E8F2FA;

	/* Focus ring */
	--color-focus-ring: #0E8A4F;

	/* Typography */
	--font-latin: 'Inter', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--font-bengali: 'SolaimanLipi', 'Noto Sans Bengali', 'Noto Sans', var(--font-latin);
	--font-base: var(--font-bengali), var(--font-latin);

	/* Display pair — headings only (h1–h3). Fraunces carries Latin glyphs, Noto Serif Bengali
	   picks up Bangla glyphs the browser falls through to; body copy stays on --font-base. */
	--font-display-bengali: 'Noto Serif Bengali', 'Noto Serif', Georgia, serif;
	--font-display: 'Fraunces', var(--font-display-bengali);

	--fs-hero: clamp(2.125rem, 1.6rem + 2.4vw, 3.75rem);
	--fs-section: clamp(1.75rem, 1.5rem + 1.1vw, 2.75rem);
	--fs-card-heading: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
	--fs-body-lg: 1.125rem;
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-xsmall: 0.8125rem;

	--lh-tight: 1.2;
	--lh-heading: 1.3;
	--lh-body: 1.7;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;

	/* Radius */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 20px;
	--radius-full: 999px;

	/* Shadow — subtle only */
	--shadow-xs: 0 1px 2px rgba(16, 26, 22, 0.05);
	--shadow-sm: 0 2px 8px rgba(16, 26, 22, 0.06);
	--shadow-md: 0 8px 24px rgba(16, 26, 22, 0.08);
	--shadow-focus: 0 0 0 3px rgba(14, 138, 79, 0.35);
	--shadow-accent: 0 10px 24px -8px rgba(232, 173, 47, 0.5);
	--shadow-hero-card: 0 28px 56px -16px rgba(4, 20, 12, 0.4);

	/* Layout */
	--container-max: 1280px;
	--container-pad: 32px;
	--header-height: 80px;

	/* Motion */
	--ease-standard: cubic-bezier(0.2, 0.65, 0.3, 1);
	--duration-fast: 150ms;
	--duration-base: 200ms;
	--duration-slow: 320ms;
}

@media (max-width: 1024px) {
	:root {
		--container-pad: 28px;
		--header-height: 72px;
	}
}

@media (max-width: 600px) {
	:root {
		--container-pad: 16px;
		--header-height: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}