BlazorWebAssembly/wwwroot/css/app.css

/* 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; }