/*

color-theme: default
reference: https://tailwindcss.com/docs/customizing-colors

Minimal color options and variations.
Almost all color variations can be played based off the few.

*/ :root {

--color-primary: #3b82f6; /* blue-400 */
--color-secondary: #2563eb; /* blue-600 */
--color-accent: #fb923c; /* orange-400 */

--background-color: #fafafa; /* gray-50 */
--background-color-alt: #f4f4f5; /* gray-100 */
--background-color-highlight: #e4e4e7; /* gray-200 */

--text-color: #3f3f46; /* gray-700 */
--text-color-alt: #52525b; /* gray-600 */

}

data-theme=“dark”

{

--color-primary: #fb923c; /* orange-400 */
--color-secondary: #f59e0b; /* orange-500 */
--color-accent: #3b82f6; /* blue-400 */

--background-color: #52525b; /* gray-600 */
--background-color-alt: #3f3f46; /* gray-700 */
--background-color-highlight: #27272a; /* gray-800 */

--text-color: #e4e4e7; /* gray-200 */
--text-color-alt: #f4f4f5; /* gray-100 */

}

/* tbd: let's combined system preference with the mode */ /*@media (prefers-color-scheme: dark) {

:root {

}

}*/