:root {
	--sl-grey-50: #f9f9fb;
	--sl-grey-200: #e5e7eb;
	--sl-grey-300: #d1d5db;
	--sl-grey-400: #9ca3af;
	--sl-grey-500: #6b7280;
	--sl-grey-600: #4b5563;
	--sl-grey-700: #374151;
	--sl-grey-800: #1f2937;
	--sl-grey-900: #111827;
	--sl-ink: #111;
	--sl-black: #000;
	--sl-white: #fff;
	--sl-danger: #ef4444;
	--sl-accent: #f57900;
	--sl-accent-soft: #ffe5d1;
	--sl-tertiary: #006e9e;
	--sl-tertiary-600: #145274;
	--sl-primary: #d91f5b;
	--sl-primary-50: #ffeced;
	--sl-primary-600: #9f2144;
	--sl-secondary: #f57f17;
	--sl-secondary-50: #fff2e8;
	--sl-tertiary-50: #eaf0f5;
	--sl-tertiary-400: #5089b1;
	--sl-ink-warm: #231f20;

	--sl-font-ui: "Inter", var(--theme-font), system-ui, sans-serif;

	--sl-radius-xs: 0.25rem;
	--sl-radius-sm: 0.375rem;
	--sl-radius-md: 0.5rem;
	--sl-radius-lg: 0.75rem;
	--sl-radius-xl: 1rem;
	--sl-radius-pill: 1.5rem;

	/* The 18px box plus the 8px beside it, so a consent label and anything that
	   lines up under it cannot drift apart. */
	--sl-checkbox-indent: 1.625rem;
}