/* Light mode (default) */
:root {
    --msme-bg: #ffffff;
    --msme-bg-alt: #f9fafb;
    --msme-surface: #ffffff;
    --msme-text: #111827;
    --msme-text-secondary: #4b5563;
    --msme-text-muted: #9ca3af;
    --msme-border: #e5e7eb;
    --msme-border-hover: #d1d5db;
    --msme-card-bg: #ffffff;
    --msme-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --msme-card-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.1);
    --msme-nav-bg: rgba(255, 255, 255, 0.8);
    --msme-gradient-orb-blue: rgba(11, 83, 148, 0.1);
    --msme-gradient-orb-green: rgba(46, 139, 87, 0.1);
    --msme-grid-pattern: radial-gradient(circle, #e5e7eb 1px, transparent 1px);
}

/* Dark mode */
[data-theme="dark"] {
    --msme-bg: #0a1628;
    --msme-bg-alt: rgba(15, 29, 50, 0.3);
    --msme-surface: #0f1d32;
    --msme-text: #ffffff;
    --msme-text-secondary: #d1d5db;
    --msme-text-muted: #6b7280;
    --msme-border: rgba(255, 255, 255, 0.1);
    --msme-border-hover: rgba(255, 255, 255, 0.2);
    --msme-card-bg: rgba(15, 29, 50, 0.5);
    --msme-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --msme-card-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.3);
    --msme-nav-bg: rgba(10, 22, 40, 0.8);
    --msme-gradient-orb-blue: rgba(11, 83, 148, 0.2);
    --msme-gradient-orb-green: rgba(46, 139, 87, 0.15);
    --msme-grid-pattern: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                         linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
}

body {
    background-color: var(--msme-bg);
    color: var(--msme-text);
    transition: background-color 0.5s, color 0.5s;
}