:root {
	--tmi-white: #ffffff;
	--tmi-dark: #090b0c;
	--tmi-dark-50: #f9fbfb;
	--tmi-dark-100: #f1f3f3;
	--tmi-dark-200: #e3e7e8;
	--tmi-dark-300: #d0d6d8;
	--tmi-dark-400: #9ca8ab;
	--tmi-dark-500: #67787c;
	/* AA-compliant muted text on white / near-white backgrounds (>=4.5:1). */
	--tmi-muted: #566268;
	--tmi-dark-700: #394447;
	--tmi-dark-800: #22292b;
	--tmi-dark-900: #161b1d;
	--tmi-green: #016630;
	--tmi-amber: #f0b100;
	--tmi-amber-600: #d08700;
	--tmi-error: #b42318;
	--tmi-error-soft: #fff1f0;
	--tmi-accent-green: #00d66f;
	--tmi-card-shadow: 2px 2px 8px rgba(9, 11, 12, 0.08);
	--tmi-soft-shadow: 2px 2px 8px rgba(9, 11, 12, 0.04);

	/* Motion tokens (from the "animate" skill / Emil Kowalski's course).
	   ease-out-quint: enters + hover lifts · ease-out-cubic: presses + general
	   ease-in-out-cubic: elements moving on screen. */
	--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
	--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
	--tmi-dur-hover: 200ms;
	--tmi-dur-press: 110ms;
	--tmi-dur-enter: 280ms;
}