Spaces:
Sleeping
Sleeping
File size: 2,149 Bytes
6f32ae8 4433399 6f32ae8 4433399 6f32ae8 4433399 6f32ae8 4433399 6f32ae8 4433399 6f32ae8 4433399 6f32ae8 4433399 6f32ae8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | /* Design System Tokens */
:root {
--transition-speed: 0.3s;
--border-radius: 16px;
--font-main: 'Outfit', 'Inter', system-ui, sans-serif;
}
/* --- LIGHT THEME (Olive + Gold) --- */
[data-theme='light'] {
--bg-body: #f7f5ef;
--bg-card: #ffffff;
--bg-nav: #f7f5ef;
--text-main: #3a3d2e;
--text-muted: #6b705c;
--primary: #a68a64;
--primary-hover: #8e7555;
--accent: #6b705c;
--border: #d6c7a1;
--shadow: 0 4px 6px -1px rgb(58 61 46 / 0.1);
--glass-border: rgba(214, 199, 161, 0.5);
--text-on-primary: #ffffff;
}
/* --- DARK THEME (Mute Purple Stone) --- */
[data-theme='dark'] {
--bg-body: #2d2838;
--bg-card: #373245;
--bg-nav: #1e1b26;
--text-main: #f8f7fc;
--text-muted: #b8a9d9;
--primary: #b8a9d9;
--primary-hover: #e9e4f5;
--accent: #7c6a9b;
--border: #4a4458;
--shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5);
--glass-border: rgba(184, 169, 217, 0.1);
--text-on-primary: #2d2838;
}
/* --- EMERALD THEME (Slate + Mint) --- */
[data-theme='emerald'] {
--bg-body: #f5f7f8;
--bg-card: #ffffff;
--bg-nav: #2b3a42;
--text-main: #2b3a42;
--text-muted: #5c8374;
--primary: #8fb9a8;
--primary-hover: #7aa594;
--accent: #5c8374;
--border: #dce3e5;
--shadow: 0 4px 6px -1px rgb(43 58 66 / 0.1);
--glass-border: rgba(143, 185, 168, 0.2);
--text-on-primary: #2b3a42;
}
/* Global resets */
html, body {
margin: 0;
padding: 0;
font-family: var(--font-main);
background-color: var(--bg-body);
color: var(--text-main);
transition: background-color var(--transition-speed), color var(--transition-speed);
}
/* Scrollbar styling */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade { animation: fadeIn 0.4s ease-out forwards; } |