/**
 * Kabomal design tokens.
 * Colors here are the style-guide defaults; inc/template-functions.php
 * overrides these same custom properties inline whenever the Customizer
 * values differ, so this file stays the single source of truth for shape.
 */

:root {
	/* Brand colors */
	--color-primary: #0A192F;
	--color-secondary: #16A34A;
	--color-accent: #F59E0B;
	--color-bg: #FFFFFF;
	--color-bg-light: #F8FAFC;
	--color-text: #111827;
	--color-white: #FFFFFF;
	--color-border: #E5E7EB;

	/* Category accent tints, supplementary to the 3 brand colors, used for
	   Knowledge Hub icon tiles and guide category badges. */
	--color-info: #2563EB;
	--color-purple: #7C3AED;
	--color-danger: #DC2626;

	/* Soft (~10%) tints for icon/badge backgrounds */
	--color-primary-soft: #E7EAEE;
	--color-secondary-soft: #E7F7EE;
	--color-accent-soft: #FEF3E2;
	--color-info-soft: #E8EFFC;
	--color-purple-soft: #F1E8FE;
	--color-danger-soft: #FCE8E7;

	/* Typography (font-family overridden inline from the Customizer) */
	--font-heading: 'Manrope', system-ui, -apple-system, sans-serif;
	--font-body: 'Inter', system-ui, -apple-system, sans-serif;

	/* Shape + motion */
	--radius: 16px;
	--radius-sm: 10px;
	--radius-full: 999px;
	--motion: 200ms;
	--ease: cubic-bezier(0.4, 0, 0.2, 1);

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

	/* Layout */
	--container-max: 1280px;
	--container-padding: 1.25rem;

	/* Elevation */
	--shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
	--shadow-md: 0 8px 24px rgba(17, 24, 39, 0.08);
	--shadow-lg: 0 16px 40px rgba(17, 24, 39, 0.12);

	/* Stacking */
	--z-header: 100;
	--z-drawer: 200;
	--z-overlay: 190;
}