/**
 * cllb design tokens — single source of truth for the visual language.
 * Light theme only. Components must reference these variables, never raw hex.
 */
:root {
	/* ------------------------------------------------------------------ */
	/* Surfaces                                                            */
	/* ------------------------------------------------------------------ */
	--bg: #f6f6fa;            /* page background */
	--surface: #ffffff;       /* cards, panels, headers */
	--surface-2: #f3f3f8;     /* subtle fills: chips, inputs, hovers */
	--surface-3: #ebebf3;     /* pressed / deeper fills */
	--line: #e8e8f0;          /* hairline borders */
	--line-strong: #d8d9e6;   /* interactive borders */

	/* ------------------------------------------------------------------ */
	/* Ink                                                                 */
	/* ------------------------------------------------------------------ */
	--text: #0a0f08;
	--text-2: #4b4e5c;
	--muted: #7c8093;

	/* ------------------------------------------------------------------ */
	/* Brand                                                               */
	/* ------------------------------------------------------------------ */
	--brand: #c1e229;         /* CTA fills (buttons, badges, fab) */
	--brand-strong: #aacb14;  /* hover / active fill */
	--brand-soft: #f1f8d3;    /* tinted chips, active nav */
	--brand-softer: #f8fce7;  /* large tinted areas */
	--brand-ink: #55710c;     /* readable green for brand TEXT / links on light bg */
	--on-brand: #0a0f08;      /* text/icons on a brand fill */

	/* Lime → teal → cyan sweep used for gradient heading accents (<span> in a
	   heading) and decorative fills. Mirrors the paint-splatter accent. */
	--brand-gradient: linear-gradient(100deg, #6fb81d 0%, #35c48f 52%, #12b6d6 100%);

	/* ------------------------------------------------------------------ */
	/* Semantic                                                            */
	/* ------------------------------------------------------------------ */
	--success: #1e9e63;
	--success-strong: #157a4b;
	--success-soft: #e6f7ee;
	--human: #58a42c;          /* "strictly human" lime-green accents */
	--human-soft: #eef8e6;
	--warn: #b7791f;
	--warn-soft: #fdf3e0;
	--danger: #de3d4e;
	--danger-strong: #c22b3c;
	--danger-soft: #fdeced;

	/* ------------------------------------------------------------------ */
	/* Shape                                                               */
	/* ------------------------------------------------------------------ */
	--radius-sm: 8px;
	--radius: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-pill: 999px;

	/* ------------------------------------------------------------------ */
	/* Elevation                                                           */
	/* ------------------------------------------------------------------ */
	--shadow-xs: 0 1px 2px rgba(22, 23, 29, 0.05);
	--shadow-sm: 0 2px 8px rgba(22, 23, 29, 0.06);
	--shadow-md: 0 10px 30px rgba(22, 23, 29, 0.08);
	--shadow-lg: 0 28px 70px rgba(22, 23, 29, 0.14);

	/* ------------------------------------------------------------------ */
	/* Typography                                                          */
	/* ------------------------------------------------------------------ */
	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* ------------------------------------------------------------------ */
	/* Layout                                                              */
	/* ------------------------------------------------------------------ */
	--sidebar-w: 236px;
	--topbar-h: 64px;
	--bottombar-h: 62px;
	--content-max: 1280px;

	/* ------------------------------------------------------------------ */
	/* Legacy aliases (older templates reference these directly)           */
	/* ------------------------------------------------------------------ */
	--bg-2: var(--surface);
	--bg-3: var(--surface-2);
	--brand-2: var(--success);
}