:root {
    --primary: #0052CC;
    --primary-dark: #003399;
    --secondary: #7C3AED;
    --accent: #8B5CF6;
    --light-bg: #F8F9FA;
    --text-primary: #1A1A1A;
    --text-secondary: #5A5A5A;
    --border-color: #E0E0E0;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.15);
    --page-bg: #FFFFFF;
    --card-bg: #FFFFFF;
    --nav-bg: #F8F9FA;
}

html.dark {
    --light-bg: #1E1E2E;
    --text-primary: #E8E8F0;
    --text-secondary: #9090A8;
    --border-color: #2E2E42;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --page-bg: #13131F;
    --card-bg: #1E1E2E;
    --nav-bg: #1A1A28;
}

body {
    font-family: 'Arial', sans-serif;
    color: var(--text-primary);
    background-color: var(--page-bg);
    transition: background-color 0.25s, color 0.25s;
}

html.dark h1,
html.dark h2,
html.dark h3 {
    color: var(--primary);
}

h1,
h2,
h3 {
    color: var(--primary);
}

.accent {
    color: var(--secondary);
}

.navigation {
    background-color: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

/* Dark mode: white-background cards → card-bg */
html.dark .info-box,
html.dark .workout-card,
html.dark .stat-card,
html.dark .modal-content,
html.dark .screen,
html.dark .routine-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

html.dark input,
html.dark select,
html.dark textarea {
    background: var(--light-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html.dark .navigation a,
html.dark .navigation span {
    color: var(--text-primary);
}

/* Dark mode: nav bar title and hamburger icon */
html.dark .navigation.bar {
    color: var(--text-primary);
}

/* Dark mode: popout slide-out menu */
html.dark .navigation.popout .menu {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

html.dark .navigation.popout .menu .title {
    border-bottom-color: var(--border-color);
}

html.dark .navigation.popout .menu [style*="border-bottom: solid 1px black"] {
    border-bottom-color: var(--border-color) !important;
}