/**
 * click-and-solve.css
 *
 * Baseline public-facing styles shared by every tool page. Individual
 * modules should add their own scoped CSS classes here (or in their own
 * enqueued stylesheet) rather than writing inline <style> blocks.
 *
 * Loads Inter as the primary typeface and defines CSS custom properties
 * for the brand color so Settings > Branding > Primary Color can be
 * reflected without a full stylesheet rebuild (see admin.js for how the
 * color picker updates --cas-primary at runtime in the admin preview).
 */

:root {
	--cas-primary: #0d6efd;
	--cas-primary-dark: #0b5ed7;
	--cas-accent: #f59e0b;
	--cas-ink: #1d2327;
	--cas-muted: #6b7280;
	--cas-muted-bg: #f8fafc;
	--cas-radius: 0.75rem;
	--cas-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.08);
	--cas-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* One accent per tool category — used as a quiet color-code across
	 * category icon chips and card accents, never as a full background,
	 * so it stays informative rather than decorative. */
	--cas-cat-business: #4f46e5;
	--cas-cat-finance: #0d9488;
	--cas-cat-document: #b45309;
	--cas-cat-ai: #db2777;
}

.cas-tools-tool-wrapper {
	font-family: var(--cas-font);
}

.cas-tools-tool-wrapper .card,
.cas-tools-tool-wrapper .cas-card {
	border-radius: var(--cas-radius);
	box-shadow: var(--cas-shadow);
	border: 1px solid rgba(15, 23, 42, 0.06);
}

.cas-tools-tool-wrapper .btn-primary {
	background-color: var(--cas-primary);
	border-color: var(--cas-primary);
}

.cas-tools-tool-wrapper .btn-primary:hover,
.cas-tools-tool-wrapper .btn-primary:focus {
	background-color: var(--cas-primary-dark);
	border-color: var(--cas-primary-dark);
}

.cas-tools-tool-wrapper :focus-visible {
	outline: 3px solid var(--cas-primary);
	outline-offset: 2px;
}