/**
 * CalculatorPeak design tokens.
 *
 * This is the single source of truth for colour, type and spacing. Elementor's
 * global colours and fonts are set to these same values, so an Elementor-built
 * homepage and a plugin-rendered calculator page are visually one system.
 *
 * Everything is namespaced or scoped to :root custom properties only — no
 * element or utility selectors live here, so nothing can collide with a theme
 * or another plugin.
 */

:root {
	/* Brand ------------------------------------------------------------- */
	--cp-navy: #102a43;
	--cp-blue: #2563eb;
	--cp-blue-hover: #1d4ed8;
	--cp-blue-light: #eff6ff;

	/* Surfaces ---------------------------------------------------------- */
	--cp-bg: #ffffff;
	--cp-bg-soft: #f8fafc;
	--cp-bg-sunken: #f1f5f9;

	/* Text -------------------------------------------------------------- */
	--cp-text: #0f172a;
	--cp-text-muted: #64748b;
	--cp-text-inverse: #ffffff;

	/* Lines ------------------------------------------------------------- */
	--cp-border: #e2e8f0;
	--cp-border-strong: #cbd5e1;
	--cp-focus: #2563eb;

	/* Semantic ---------------------------------------------------------- */
	--cp-success: #059669;
	--cp-success-bg: #ecfdf5;
	--cp-warning: #b45309;
	--cp-warning-bg: #fffbeb;
	--cp-error: #dc2626;
	--cp-error-bg: #fef2f2;

	/* Typography -------------------------------------------------------- */
	--cp-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--cp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	--cp-text-xs: 0.8125rem;   /* 13px */
	--cp-text-sm: 0.875rem;    /* 14px */
	--cp-text-base: 1rem;      /* 16px */
	--cp-text-lg: 1.125rem;    /* 18px */
	--cp-text-xl: 1.375rem;    /* 22px */
	--cp-text-2xl: 1.75rem;    /* 28px */
	--cp-text-3xl: 2.25rem;    /* 36px */
	--cp-text-4xl: 3rem;       /* 48px */

	--cp-leading-tight: 1.2;
	--cp-leading-snug: 1.4;
	--cp-leading-normal: 1.7;

	--cp-weight-normal: 400;
	--cp-weight-medium: 500;
	--cp-weight-semibold: 600;
	--cp-weight-bold: 700;

	/* Spacing scale ----------------------------------------------------- */
	--cp-space-1: 0.25rem;
	--cp-space-2: 0.5rem;
	--cp-space-3: 0.75rem;
	--cp-space-4: 1rem;
	--cp-space-5: 1.5rem;
	--cp-space-6: 2rem;
	--cp-space-7: 3rem;
	--cp-space-8: 4rem;
	--cp-space-9: 6rem;

	/* Radius and elevation ---------------------------------------------- */
	--cp-radius-sm: 6px;
	--cp-radius: 10px;
	--cp-radius-lg: 14px;
	--cp-radius-pill: 999px;

	--cp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
	--cp-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
	--cp-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);

	/* Layout ------------------------------------------------------------ */
	--cp-content-width: 820px;   /* article readability */
	--cp-page-width: 1200px;     /* section container */
	--cp-gutter: 16px;

	/* Motion ------------------------------------------------------------ */
	--cp-transition: 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--cp-transition: 0ms;
	}
}