/**
 * Design tokens. Customizer-controlled tokens are overridden by an inline :root block
 * generated from theme mods (see inc/enqueue.php → o2skin_css_variables()).
 */
:root {
	/* Brand */
	--o2-primary: #18345b;
	--o2-primary-dark: #102540;
	--o2-primary-hover: #1d3a64;
	--o2-primary-muted: #5e708a;
	--o2-secondary: #eec088;
	--o2-accent: #d4a66a;
	--o2-accent-wash: #fef9f1;

	/* Neutrals */
	--o2-heading: #2a2f38;
	--o2-ink: #263242;
	--o2-text: #525560;
	--o2-text-soft: #647082;
	--o2-text-faint: #989fb0;
	--o2-footer-heading: #5e697c;
	--o2-bg: #ffffff;
	--o2-surface: #fcfcfd;
	--o2-soft: #eff3f8;
	--o2-wash: #dee7f2;
	--o2-line: #e2e7ee;
	--o2-line-soft: #edeef2;
	--o2-line-strong: #d9d9d9;
	--o2-input-line: #d2d6de;
	--o2-faq-answer: #f8fbfc;
	--o2-card-soft: #f9f9fa;
	--o2-menu-hover: #767676;
	--o2-white: #ffffff;
	--o2-black: #000000;

	/* Aliases (backwards-friendly names) */
	--primary-color: var(--o2-primary);
	--secondary-color: var(--o2-secondary);
	--accent-color: var(--o2-accent);
	--text-color: var(--o2-text);
	--heading-color: var(--o2-heading);
	--background-color: var(--o2-bg);

	/* Typography */
	--o2-font: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--o2-fs-body: 18px;
	--o2-fs-small: 16px;
	--o2-fs-xs: 14px;
	--o2-fs-h1: 48px;
	--o2-fs-h2: 40px;
	--o2-fs-h3: 20px;
	--o2-fs-hero: clamp(37px, 3vw, 46px);
	--o2-lh-body: 1.5;
	--o2-lh-heading: 1.25;

	/* Layout */
	--o2-container: 1176px;
	--o2-gutter: 12px;
	--o2-header-h: 80px;
	--o2-header-bg: #fafafa;
	--o2-section-y: 80px;
	--o2-section-y-sm: 50px;
	--o2-heading-gap: 48px;

	/* Shape */
	--o2-radius: 16px;
	--o2-radius-sm: 12px;
	--o2-radius-md: 14px;
	--o2-radius-lg: 24px;
	--o2-btn-radius: 8px;

	/* Elevation */
	--o2-shadow-header: 0 0 4px rgba(179, 179, 179, 0.5);
	--o2-shadow-card: 0 33px 19.8px -17px rgba(0, 0, 0, 0.04);
	--o2-shadow-soft: 0 10px 30px rgba(24, 52, 91, 0.08);
	--o2-shadow-solution: 11px 28px 30px -10px rgba(48, 54, 87, 0.13);
	--o2-shadow-pop: 0 20px 60px rgba(16, 37, 64, 0.25);

	/* Motion */
	--o2-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--o2-fast: 0.2s;
	--o2-normal: 0.3s;
	--o2-slow: 0.5s;

	/* Layers */
	--o2-z-header: 100;
	--o2-z-float: 150;
	--o2-z-drawer: 200;
	--o2-z-modal: 300;
}
