:root {
    --color-primary: oklch(39.012% 0.18972 263.947);

    --color-canvas: oklch(83.076% 0.06648 297.575);
    --color-text: #000000;
    --color-shadow: #00000055;
    --color-button: #d3cbf7;
    --color-input: oklch(88.525% 0.04724 304.574);

    --color-error: oklch(52.709% 0.2076 28.345);
    --color-warning: oklch(60.61% 0.14681 52.494);

    --color-gray-75: oklch(0% 0 0 / 0.116);
    --color-gray-100: oklch(9.64% 0.02 256.742 / 0.144);
    --color-gray-200: oklch(12% 9% 264deg / 8%);
    --color-gray-300: oklch(12% 8.5% 264deg / 17%);
    --color-gray-400: oklch(12% 8% 264deg / 38%);
    --color-input0: oklch(12% 7.5% 264deg / 50%);
    --color-gray-600: oklch(12% 7% 264deg / 67%);
    --color-gray-700: oklch(12% 6% 264deg / 77%);
    --color-gray-800: oklch(12% 5% 264deg / 85%);
    --color-gray-900: oklch(12% 5% 264deg / 90%);
    --color-gray-950: oklch(12% 5% 264deg / 95%);
}

/* See "data-theme" in "index.html", instead of using "@media (prefers-color-scheme: dark)". */
:root[data-theme='dark'] {
    --color-primary: oklch(64.982% 0.18602 266.305);

    --color-canvas: oklch(27.062% 0.01349 304.804);
    --color-text: #ffffff;
    --color-shadow: #00000055;
    --color-button: #272a38;
    --color-input: oklch(17% 1% 264deg);

    --color-error: oklch(80% 55% 31deg);
    --color-warning: oklch(63.166% 0.11404 60.924);

    --color-gray-75: oklch(20.483% 0.00617 271.115 / 0.815);
    --color-gray-100: oklch(28% 3% 264deg / 65%);
    --color-gray-200: oklch(31% 3% 264deg / 80%);
    --color-gray-300: oklch(35% 3% 264deg / 80%);
    --color-gray-400: oklch(47% 3.5% 264deg / 80%);
    --color-input0: oklch(64% 4% 264deg / 80%);
    --color-gray-600: oklch(82% 4% 264deg / 80%);
    --color-gray-700: oklch(92% 4.5% 264deg / 80%);
    --color-gray-800: oklch(93% 3.5% 264deg / 85%);
    --color-gray-900: oklch(95% 2% 264deg / 90%);
    --color-gray-950: oklch(94% 1.5% 264deg / 95%);
}