100 lines
2.6 KiB
CSS
100 lines
2.6 KiB
CSS
@import "tailwindcss";
|
|
|
|
@layer base {
|
|
:root {
|
|
--color-background: hsl(32 92% 87%); /* bg0 */
|
|
--color-foreground: hsl(40 13% 23%); /* fg */
|
|
|
|
--color-card: hsl(39 59% 88%); /* bg1 */
|
|
--color-card-foreground: hsl(40 13% 23%); /* fg */
|
|
|
|
--color-popover: hsl(39 59% 88%); /* bg1 */
|
|
--color-popover-foreground: hsl(40 13% 23%); /* fg */
|
|
|
|
--color-primary: hsl(0 100% 31%); /* red */
|
|
--color-primary-foreground: hsl(40 92% 88%); /* bg */
|
|
|
|
--color-secondary: hsl(39 46% 81%); /* bg2 */
|
|
--color-secondary-foreground: hsl(40 13% 23%); /* fg */
|
|
|
|
--color-muted: hsl(37 29% 73%); /* bg3 */
|
|
--color-muted-foreground: hsl(40 4% 36%); /* gray */
|
|
|
|
--color-accent: hsl(40 71% 49%); /* yellow */
|
|
--color-accent-foreground: hsl(0 0% 16%);
|
|
|
|
--color-destructive: hsl(0 76% 46%); /* bright_red */
|
|
--color-destructive-foreground: hsl(40 92% 88%); /* bg */
|
|
|
|
--color-border: hsl(33 14% 59%); /* fg4 */
|
|
--color-input: hsl(33 14% 59%); /* fg4 */
|
|
--color-ring: hsl(0 100% 31%); /* red */
|
|
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--color-background: hsl(0 0% 16%); /* bg0 */
|
|
--color-foreground: hsl(40 92% 88%); /* fg */
|
|
|
|
--color-card: hsl(0 7% 23%); /* bg1 */
|
|
--color-card-foreground: hsl(40 92% 88%); /* fg */
|
|
|
|
--color-popover: hsl(0 7% 23%); /* bg1 */
|
|
--color-popover-foreground: hsl(40 92% 88%); /* fg */
|
|
|
|
--color-primary: hsl(6 93% 59%); /* red */
|
|
--color-primary-foreground: hsl(0 0% 16%); /* bg */
|
|
|
|
--color-secondary: hsl(0 5% 29%); /* bg2 */
|
|
--color-secondary-foreground: hsl(40 92% 88%); /* fg */
|
|
|
|
--color-muted: hsl(20 6% 36%); /* bg3 */
|
|
--color-muted-foreground: hsl(33 14% 59%); /* gray */
|
|
|
|
--color-accent: hsl(42 95% 58%); /* yellow */
|
|
--color-accent-foreground: hsl(0 0% 16%);
|
|
|
|
--color-destructive: hsl(6 93% 59%); /* bright_red */
|
|
--color-destructive-foreground: hsl(40 92% 88%); /* bg */
|
|
|
|
--color-border: hsl(24 10% 51%); /* fg4 */
|
|
--color-input: hsl(24 10% 51%); /* fg4 */
|
|
--color-ring: hsl(6 93% 59%); /* red */
|
|
}
|
|
|
|
* {
|
|
@apply box-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
@utility bg-background {
|
|
background-color: var(--color-background);
|
|
}
|
|
|
|
@utility text-foreground {
|
|
color: var(--color-foreground);
|
|
}
|
|
|
|
/* Add other utility classes for colors */
|
|
@utility bg-card {
|
|
background-color: var(--color-card);
|
|
}
|
|
|
|
@utility text-card-foreground {
|
|
color: var(--color-card-foreground);
|
|
}
|
|
|
|
@utility bg-primary {
|
|
background-color: var(--color-primary);
|
|
}
|
|
|
|
@utility text-primary-foreground {
|
|
color: var(--color-primary-foreground);
|
|
}
|
|
|
|
/* ... add other utility classes as needed ... */
|