/*
 * Metric-matched fallbacks: Arial scaled to the web fonts' advance widths and vertical metrics
 * (measured 2026-09-30 in Chrome against the served Raleway/Roboto files), so the swap to the
 * web font moves nothing on screen.
 */
@font-face {
	font-family: "Raleway Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600 900;
	size-adjust: 100%;
	ascent-override: 94%;
	descent-override: 23%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Roboto Fallback";
	src: local("Arial"), local("ArialMT");
	font-weight: 100 500;
	size-adjust: 99.5%;
	ascent-override: 95.4%;
	descent-override: 25.1%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Roboto Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600 900;
	size-adjust: 94.5%;
	ascent-override: 100.6%;
	descent-override: 26.5%;
	line-gap-override: 0%;
}

/*
 * RyanOConnellFinance design tokens (--roc-*).
 * One source of truth for the site chrome and new components (docs/elementor-removal-implementation.md
 * §6.0a); loaded only where the new chrome renders. Blue / black / white only: no purple,
 * no dark mode (CLAUDE.md). Values follow what the theme's newest templates already use.
 */
:root {
	/* Blue */
	--roc-blue-50: #eff6ff;
	--roc-blue-100: #dbeafe;
	--roc-blue-200: #bfdbfe;
	--roc-blue-300: #93c5fd;
	--roc-blue-500: #3b82f6;
	--roc-blue-600: #2563eb; /* primary */
	--roc-blue-700: #1d4ed8;
	--roc-blue-800: #1e40af; /* dark */
	--roc-blue-900: #1e3a8a;

	/* Neutrals (slate) */
	--roc-slate-50: #f8fafc;
	--roc-slate-100: #f1f5f9;
	--roc-slate-200: #e2e8f0;
	--roc-slate-300: #cbd5e1;
	--roc-slate-400: #94a3b8;
	--roc-slate-500: #64748b;
	--roc-slate-600: #475569;
	--roc-slate-700: #334155;
	--roc-slate-800: #1e293b;
	--roc-slate-900: #0f172a;
	--roc-ink: #020617; /* near-black for the footer */
	--roc-white: #ffffff;

	/* Semantic */
	--roc-text: var(--roc-slate-900);
	--roc-text-muted: var(--roc-slate-600);
	--roc-text-subtle: var(--roc-slate-500);
	--roc-surface: var(--roc-white);
	--roc-surface-alt: var(--roc-slate-50);
	--roc-surface-tint: var(--roc-blue-50);
	--roc-border: var(--roc-slate-200);
	--roc-border-strong: var(--roc-slate-300);
	--roc-accent: var(--roc-blue-600);
	--roc-accent-strong: var(--roc-blue-800);
	--roc-error: #dc2626; /* functional only: form errors, cart removal */
	--roc-gradient: linear-gradient(135deg, var(--roc-blue-600) 0%, var(--roc-blue-800) 100%);

	/* Type */
	--roc-font-display: "Raleway", "Raleway Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--roc-font-body: "Roboto", "Roboto Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--roc-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;
	--roc-text-xs: 0.75rem;
	--roc-text-sm: 0.875rem;
	--roc-text-base: 1rem;
	--roc-text-lg: 1.125rem;
	--roc-text-xl: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem);
	--roc-h4: 1.125rem;
	--roc-h3: clamp(1.1875rem, 1.05rem + 0.55vw, 1.375rem);
	--roc-h2: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem);
	--roc-h1: clamp(2.25rem, 1.55rem + 2.9vw, 3.75rem);
	--roc-leading-tight: 1.12;
	--roc-leading-snug: 1.3;
	--roc-leading-body: 1.6;
	--roc-tracking-display: -0.02em;

	/* Space (4px scale) */
	--roc-space-1: 0.25rem;
	--roc-space-2: 0.5rem;
	--roc-space-3: 0.75rem;
	--roc-space-4: 1rem;
	--roc-space-5: 1.25rem;
	--roc-space-6: 1.5rem;
	--roc-space-8: 2rem;
	--roc-space-10: 2.5rem;
	--roc-space-12: 3rem;
	--roc-space-16: 4rem;
	--roc-space-section: clamp(3rem, 2rem + 4vw, 6rem);
	--roc-gutter: clamp(16px, 4vw, 32px);
	--roc-container: 1200px;

	/* Shape */
	--roc-radius-sm: 8px;
	--roc-radius-md: 12px;
	--roc-radius-lg: 16px;
	--roc-radius-xl: 24px;
	--roc-radius-pill: 999px;
	--roc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--roc-shadow-card: 0 10px 24px rgba(15, 23, 42, 0.06);
	--roc-shadow-hover: 0 18px 36px rgba(37, 99, 235, 0.14);
	--roc-shadow-pop: 0 24px 48px -12px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.06);

	/* Focus */
	--roc-focus: 3px solid var(--roc-blue-600);
	--roc-focus-on-dark: 3px solid var(--roc-blue-300);
	--roc-focus-offset: 2px;

	/* Motion. Every animation sits behind prefers-reduced-motion: no-preference. */
	--roc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--roc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out: fast start, long soft landing */
	/* A damped spring (about 10% overshoot) for small "pop" entrances */
	--roc-ease-spring: linear(0, 0.034 2%, 0.136 4.4%, 0.52 11.4%, 0.758 16.5%, 0.94 21.9%, 1.054 27.7%, 1.098 32.3%, 1.104 36.2%, 1.088 40.6%, 1.03 50.3%, 0.998 58.4%, 0.987 65.7%, 0.993 78.6%, 1);
	--roc-fast: 150ms;
	--roc-base: 220ms;
	--roc-slow: 600ms;
	--roc-shadow-glow: 0 22px 44px -18px rgba(37, 99, 235, 0.42), 0 2px 6px rgba(15, 23, 42, 0.05);
	--roc-gradient-text: linear-gradient(100deg, var(--roc-blue-600) 10%, var(--roc-blue-800) 90%);

	/* Layers (the course-article reading bar sits at 9999, above these) */
	--roc-z-header: 1000;
	--roc-z-dropdown: 1010;
	--roc-z-toast: 1020;

	/* Chrome metrics */
	--roc-header-h: 72px;
}

@media (max-width: 991.98px) {
	:root {
		--roc-header-h: 60px;
	}
}