71 lines
1.7 KiB
CSS
71 lines
1.7 KiB
CSS
/* @config "../tailwind.config.js"; */
|
|
@import "tailwindcss";
|
|
@import "./tokens.css";
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
}
|
|
|
|
html.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
background-color: var(--color-surface-muted);
|
|
color: var(--color-text-primary);
|
|
transition: background-color 0.25s ease, color 0.25s ease;
|
|
}
|
|
|
|
::selection {
|
|
background-color: var(--color-brand-500);
|
|
color: var(--color-text-inverse);
|
|
}
|
|
|
|
.surface-card {
|
|
background-color: var(--color-surface-card);
|
|
border: 1px solid var(--color-border-strong);
|
|
box-shadow: 0 20px 80px rgba(15, 23, 42, 0.08);
|
|
}
|
|
|
|
.glass-panel {
|
|
background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.bg-brand {
|
|
background: var(--color-gradient-brand);
|
|
}
|
|
|
|
.bg-brand-soft {
|
|
background: linear-gradient(135deg, var(--color-brand-from-20), var(--color-brand-to-20));
|
|
}
|
|
|
|
.bg-brand-horizontal-soft {
|
|
background: linear-gradient(90deg, var(--color-brand-from-20), var(--color-brand-to-20));
|
|
}
|
|
|
|
.hover\:bg-brand:hover {
|
|
background: var(--color-gradient-brand);
|
|
}
|
|
|
|
.text-brand-gradient {
|
|
background: var(--color-gradient-brand);
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.hover\:text-brand-gradient:hover {
|
|
background: var(--color-gradient-brand);
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.shadow-brand-20 {
|
|
box-shadow: 0 10px 15px -3px var(--color-brand-shadow-20), 0 4px 6px -4px var(--color-brand-shadow-20);
|
|
}
|
|
} |