/**
 * Design system variables. Load first (e.g. in head.php or style.css).
 */
:root,
[data-bs-theme="light"] {
	--primary: #1a4a4a;
	--primary-mid: #215C5C;
	--primary-light: #2d7a7a;
	--primary-ghost: #e8f4f4;
	--accent: #00c896;
	--accent-soft: #e6faf5;
	--danger: #e53e3e;
	--danger-soft: #fff5f5;
	--warning: #f59e0b;
	--warning-soft: #fffbeb;
	--success: #10b981;
	--success-soft: #ecfdf5;
	--text-dark: #0f1923;
	--text-mid: #3d4f5c;
	--text-muted: #7a8fa3;
	--border: #e4eaf0;
	--surface: #ffffff;
	--bg: #f0f4f8;
	/* Zebra rows: light cool off-white (not pure white, not grey band) */
	--table-row-stripe: #f7f9fb;
	--sidebar-bg: #f0f4f8;
	--sidebar-text: #243b3a;
	--sidebar-hover: rgba(36, 59, 58, 0.08);
	--sidebar-active: rgba(0, 200, 150, 0.2);
	--sidebar-active-text: #0b6b55;
	--radius: 14px;
	--radius-sm: 8px;
	--radius-xs: 6px;
	--shadow: 0 4px 24px rgba(15, 31, 31, 0.08);
	--shadow-md: 0 8px 32px rgba(15, 31, 31, 0.12);
	--shadow-lg: 0 16px 48px rgba(15, 31, 31, 0.16);
	--transition: all 0.2s ease;
	--app-page-max-width: 72rem;
	--app-page-inline-padding: clamp(0.75rem, 2vw, 1.5rem);

	/* Bootstrap + app bridge (explicit hex — Bootstrap reads these at parse time) */
	--app-primary: #215c5c;
	--app-primary-hover: #1a4a4a;
	--app-primary-light: var(--primary-light);
	--app-primary-rgb: 33, 92, 92;
	--bs-body-bg: var(--surface);
	--bs-body-color: var(--text-mid);
	--bs-primary: var(--primary-mid);
	--bs-primary-rgb: var(--app-primary-rgb);
	--bs-primary-hover: var(--primary);
	--bs-primary-hover-rgb: 26, 74, 74;
	--bs-secondary: #cce8c9;
	--bs-secondary-rgb: 204, 232, 201;
	--bs-heading-color: var(--text-dark);
	--bs-link-color: var(--primary-mid);
	--bs-link-hover-color: var(--primary);
	--inverse-color: var(--text-mid);
	--inverse-color-rgb: 61, 79, 92;
	--btn-border-radius: var(--radius-sm);
	--btn-min-height: 2.375rem;
	--btn-min-height-sm: 2rem;
	--btn-padding-x: 1.125rem;
	--btn-padding-x-sm: 0.75rem;
	--btn-font-size: 0.8125rem;
	--btn-font-size-sm: 0.8125rem;
	--btn-font-weight: 600;
	--btn-border-width: 1.5px;
	--btn-line-height: 1.25;

	/* Form fields — same shell as buttons (border weight, radius, focus) */
	--field-min-height: 2.625rem;
	--field-min-height-sm: 2rem;
	--field-padding-x: 0.875rem;
	--field-padding-y: 0.625rem;
	--field-padding-x-sm: 0.625rem;
	--field-padding-y-sm: 0.375rem;
	--field-font-size: 0.875rem;
	--field-font-size-sm: 0.8125rem;
	--field-font-weight: 400;
	--field-line-height: 1.5;
	--field-font-family: "DM Sans", sans-serif;
	--field-border-width: 1.5px;
	--field-border-radius: var(--radius-sm);
	--field-border-color: var(--border);
	--field-bg: var(--surface);
	--field-color: var(--text-dark);
	--field-placeholder-color: var(--text-muted);
	--field-focus-border-color: var(--text-muted);
	--field-select-padding-right: 2.25rem;
	--field-select-padding-right-sm: 2rem;
	--field-transition: border-color 0.2s ease, box-shadow 0.2s ease;
	--field-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237a8fa3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}