:root {
    --primary-color: #6750A4;
    --primary-hover: #7F67BE;

    --secondary-color: #ffe12d99;
    --secondary-hover: #ffea5f8c;

    --error-color: #c03f3fe1;
	--success-color: #85c4a6;

    --surface-color: #ffffff;
    --background-color: #f7f9ff;
    --background-color-rgb: 247, 249, 255;

    --text-color-900: #1a0f1a;
    --text-color-800: #2b1f2b;
    --text-color-700: #3c2f3c;
    --text-color-600: #4a3f4a;
    --text-color-500: #7a6e7a;
    --text-color-400: #9b8f9b;
    --text-color-300: #bcb0bc;
    --text-color-200: #dcd0dc;
    --text-color-100: #fdf7fd;

    --border-color: #e6e5f3;
	--text-color: var(--text-color-900);
	--text-on-primary: #ffffff;
	--text-on-secondary: #000000;
	--shadow-color: rgba(30, 13, 155, 0.08);
	--overlay-color: rgba(16, 15, 26, 0.79);
}