136 lines
3.9 KiB
CSS
136 lines
3.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
@variant dark (.dark &);
|
|
|
|
:root {
|
|
--background: #fbf7ff;
|
|
--foreground: #2c2740;
|
|
--ink: #2c2740;
|
|
--ink-soft: #5a527a;
|
|
--muted: #8a83a8;
|
|
--card: #ffffff;
|
|
--card-soft: #f6f1ff;
|
|
--border: #ece5fa;
|
|
--accent: #8a7be3;
|
|
--accent-soft: #efeafd;
|
|
--success: #7fb89c;
|
|
--success-soft: #eaf6ef;
|
|
--success-border: #c9e3d4;
|
|
--success-ink: #305a45;
|
|
--halo-1: rgba(255, 213, 232, 0.55); /* soft pink */
|
|
--halo-2: rgba(204, 224, 255, 0.55); /* baby blue */
|
|
--halo-3: rgba(232, 218, 255, 0.55); /* lavender */
|
|
color-scheme: light;
|
|
}
|
|
|
|
:root[data-theme="dark"],
|
|
.dark {
|
|
--background: #0f0c1f;
|
|
--foreground: #e9e4f6;
|
|
--ink: #ece8fa;
|
|
--ink-soft: #b9b1d6;
|
|
--muted: #8a83a8;
|
|
--card: #1a1530;
|
|
--card-soft: #221c3d;
|
|
--border: #2c2548;
|
|
--accent: #b1a3ff;
|
|
--accent-soft: #2a2350;
|
|
--success: #7fb89c;
|
|
--success-soft: #1d2e26;
|
|
--success-border: #2f4d3d;
|
|
--success-ink: #b9e0c9;
|
|
--halo-1: rgba(120, 70, 130, 0.35);
|
|
--halo-2: rgba(60, 90, 160, 0.35);
|
|
--halo-3: rgba(80, 60, 150, 0.35);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: 'Quicksand', 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
/* Cosmic-newborn background: soft radial halos + pinpoint stars */
|
|
.bg-cosmic {
|
|
background-color: var(--background);
|
|
background-image:
|
|
radial-gradient(circle at 12% 18%, var(--halo-1) 0%, transparent 38%),
|
|
radial-gradient(circle at 88% 12%, var(--halo-2) 0%, transparent 42%),
|
|
radial-gradient(circle at 50% 90%, var(--halo-3) 0%, transparent 48%),
|
|
radial-gradient(1px 1px at 22% 30%, rgba(255,255,255,0.7) 50%, transparent 51%),
|
|
radial-gradient(1px 1px at 70% 22%, rgba(255,255,255,0.6) 50%, transparent 51%),
|
|
radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.6) 50%, transparent 51%),
|
|
radial-gradient(1px 1px at 82% 60%, rgba(255,255,255,0.7) 50%, transparent 51%),
|
|
radial-gradient(1px 1px at 18% 82%, rgba(255,255,255,0.6) 50%, transparent 51%);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.dark .bg-cosmic {
|
|
background-image:
|
|
radial-gradient(circle at 12% 18%, var(--halo-1) 0%, transparent 38%),
|
|
radial-gradient(circle at 88% 12%, var(--halo-2) 0%, transparent 42%),
|
|
radial-gradient(circle at 50% 90%, var(--halo-3) 0%, transparent 48%),
|
|
radial-gradient(1px 1px at 22% 30%, rgba(255,255,255,0.85) 50%, transparent 51%),
|
|
radial-gradient(1px 1px at 70% 22%, rgba(255,255,255,0.75) 50%, transparent 51%),
|
|
radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.7) 50%, transparent 51%),
|
|
radial-gradient(1px 1px at 82% 60%, rgba(255,255,255,0.8) 50%, transparent 51%),
|
|
radial-gradient(1px 1px at 18% 82%, rgba(255,255,255,0.7) 50%, transparent 51%);
|
|
}
|
|
|
|
.bg-card {
|
|
background-color: var(--card);
|
|
}
|
|
|
|
.bg-card-soft {
|
|
background-color: var(--card-soft);
|
|
}
|
|
|
|
.shadow-soft {
|
|
box-shadow: 0 6px 20px -10px rgba(138, 123, 227, 0.25), 0 2px 6px -2px rgba(44, 39, 64, 0.06);
|
|
}
|
|
|
|
.shadow-lifted {
|
|
box-shadow: 0 18px 40px -18px rgba(138, 123, 227, 0.35), 0 6px 14px -6px rgba(44, 39, 64, 0.08);
|
|
}
|
|
|
|
/* Form elements */
|
|
:root input,
|
|
:root textarea,
|
|
:root select {
|
|
color: var(--ink);
|
|
background-color: var(--card);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
:root input::placeholder,
|
|
:root textarea::placeholder {
|
|
color: var(--muted);
|
|
}
|
|
|
|
:root[data-theme="dark"] input,
|
|
:root[data-theme="dark"] textarea,
|
|
:root[data-theme="dark"] select,
|
|
.dark input,
|
|
.dark textarea,
|
|
.dark select {
|
|
color: var(--ink);
|
|
background-color: var(--card-soft);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
:root[data-theme="dark"] input::placeholder,
|
|
:root[data-theme="dark"] textarea::placeholder,
|
|
.dark input::placeholder,
|
|
.dark textarea::placeholder {
|
|
color: var(--muted);
|
|
}
|