/**
 * Kwik Blocks — global design tokens.
 *
 * The Kwikonect brand as CSS custom properties (usable by blocks, patterns,
 * and Kwik enhancements) plus the WordPress preset colour classes
 * (.has-kwik-{slug}-color / -background-color / -border-color) that back the
 * registered editor palette, so palette picks render correctly on the front end.
 *
 * Loaded on both the front end and the editor. No webfont is fetched — the
 * font tokens use Montserrat only if the site already provides it.
 *
 * @package Kwikonect\KwikBlocks
 */

:root {
	/* Brand — primary */
	--kwik-red: #cc3333;
	--kwik-orange: #e6883c;
	--kwik-yellow: #f3bb4b;
	--kwik-green: #78b957;
	--kwik-blue: #459bd7;
	--kwik-purple: #8b4393;

	/* Brand — soft */
	--kwik-red-soft: #dda7a4;
	--kwik-orange-soft: #ebc5a2;
	--kwik-yellow-soft: #f4deac;
	--kwik-green-soft: #c1dbaf;
	--kwik-blue-soft: #abcce8;
	--kwik-purple-soft: #bfa2c6;

	/* Brand — neutrals */
	--kwik-cream: #fef6e3;
	--kwik-ink: #1c1a1c;
	--kwik-muted: #6b6a6b;

	/* Semantic */
	--kwik-success: var(--kwik-green);
	--kwik-error: var(--kwik-red);
	--kwik-warning: var(--kwik-orange);
	--kwik-accent: var(--kwik-blue);

	/* Typography (Montserrat if available — no webfont fetched) */
	--kwik-font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--kwik-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--kwik-weight-heading: 800;
	--kwik-weight-subhead: 600;
	--kwik-weight-body: 500;

	/* Type scale */
	--kwik-text-xs: 0.75rem;
	--kwik-text-sm: 0.875rem;
	--kwik-text-md: 1rem;
	--kwik-text-lg: 1.25rem;
	--kwik-text-xl: 1.75rem;
	--kwik-text-2xl: 2.5rem;
	--kwik-text-3xl: 3.5rem;

	/* Spacing scale */
	--kwik-space-xs: 8px;
	--kwik-space-sm: 16px;
	--kwik-space-md: 24px;
	--kwik-space-lg: 40px;
	--kwik-space-xl: 64px;

	/* Radius */
	--kwik-radius-sm: 8px;
	--kwik-radius-md: 14px;
	--kwik-radius-lg: 20px;
}

/* WordPress preset colour classes backing the registered Kwik palette. */
.has-kwik-red-color { color: var(--kwik-red) !important; }
.has-kwik-red-background-color { background-color: var(--kwik-red) !important; }
.has-kwik-red-border-color { border-color: var(--kwik-red) !important; }
.has-kwik-orange-color { color: var(--kwik-orange) !important; }
.has-kwik-orange-background-color { background-color: var(--kwik-orange) !important; }
.has-kwik-orange-border-color { border-color: var(--kwik-orange) !important; }
.has-kwik-yellow-color { color: var(--kwik-yellow) !important; }
.has-kwik-yellow-background-color { background-color: var(--kwik-yellow) !important; }
.has-kwik-yellow-border-color { border-color: var(--kwik-yellow) !important; }
.has-kwik-green-color { color: var(--kwik-green) !important; }
.has-kwik-green-background-color { background-color: var(--kwik-green) !important; }
.has-kwik-green-border-color { border-color: var(--kwik-green) !important; }
.has-kwik-blue-color { color: var(--kwik-blue) !important; }
.has-kwik-blue-background-color { background-color: var(--kwik-blue) !important; }
.has-kwik-blue-border-color { border-color: var(--kwik-blue) !important; }
.has-kwik-purple-color { color: var(--kwik-purple) !important; }
.has-kwik-purple-background-color { background-color: var(--kwik-purple) !important; }
.has-kwik-purple-border-color { border-color: var(--kwik-purple) !important; }

.has-kwik-red-soft-color { color: var(--kwik-red-soft) !important; }
.has-kwik-red-soft-background-color { background-color: var(--kwik-red-soft) !important; }
.has-kwik-orange-soft-color { color: var(--kwik-orange-soft) !important; }
.has-kwik-orange-soft-background-color { background-color: var(--kwik-orange-soft) !important; }
.has-kwik-yellow-soft-color { color: var(--kwik-yellow-soft) !important; }
.has-kwik-yellow-soft-background-color { background-color: var(--kwik-yellow-soft) !important; }
.has-kwik-green-soft-color { color: var(--kwik-green-soft) !important; }
.has-kwik-green-soft-background-color { background-color: var(--kwik-green-soft) !important; }
.has-kwik-blue-soft-color { color: var(--kwik-blue-soft) !important; }
.has-kwik-blue-soft-background-color { background-color: var(--kwik-blue-soft) !important; }
.has-kwik-purple-soft-color { color: var(--kwik-purple-soft) !important; }
.has-kwik-purple-soft-background-color { background-color: var(--kwik-purple-soft) !important; }

.has-kwik-cream-color { color: var(--kwik-cream) !important; }
.has-kwik-cream-background-color { background-color: var(--kwik-cream) !important; }
.has-kwik-ink-color { color: var(--kwik-ink) !important; }
.has-kwik-ink-background-color { background-color: var(--kwik-ink) !important; }