:root {
    --color-bg: #F9FAFB;
    --color-surface: #F9FAFB;
    --color-surface-alt: #F3F4F6;
    --color-surface-subtle: #F3F4F6;
    --color-text: #374151;
    --color-text-strong: #1F2937;
    --color-heading: #111827;
    --color-navy: #1A4F8B;
    --color-accent: #3B7BEB;
    --color-accent-hover: #2563EB;
    --color-focus: #93C5FD;
    --color-muted: #9CA3AF;
    --color-muted-dark: #6B7280;
    --color-muted-darker: #4B5563;
    --color-border: #E5E7EB;
    --color-border-light: #D1D5DB;
    --color-info-bg: #F0F4FA;
    --color-info-light: #EFF6FF;
    --color-info-text: #1E40AF;
    --color-warning-bg: #FEF3C7;
    --color-warning-text: #92400E;
    --color-warning-border: #F59E0B;
    --color-success: #16A34A;
    --color-success-bg: #E8F5E9;
    --color-success-border: #4CAF50;
    --color-overlay: rgba(0,0,0,0.5);
    --shadow-soft: 0 1px 6px rgba(0,0,0,0.06);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-strong: 0 8px 30px rgba(0,0,0,0.15);
    --shadow-focus: 0 1px 6px rgba(37,99,235,0.1);
    --color-shimmer: #93C5FD;
}

[data-theme="dark"] {
    --color-bg: #1a1a2e;
    --color-surface: #25253e;
    --color-surface-alt: #2d2d48;
    --color-surface-subtle: #323252;
    --color-text: #d1d5db;
    --color-text-strong: #e5e7eb;
    --color-heading: #f3f4f6;
    --color-navy: #7baaf7;
    --color-accent: #5b9cf5;
    --color-accent-hover: #7bb3f7;
    --color-focus: #3b6cb5;
    --color-muted: #6b7280;
    --color-muted-dark: #9ca3af;
    --color-muted-darker: #b0b8c4;
    --color-border: #3d3d5c;
    --color-border-light: #4a4a6a;
    --color-info-bg: #1e2a4a;
    --color-info-light: #1e2a4a;
    --color-info-text: #93b4f5;
    --color-warning-bg: #3d3520;
    --color-warning-text: #fbbf24;
    --color-warning-border: #fbbf24;
    --color-success: #34d399;
    --color-success-bg: #1a3a2a;
    --color-success-border: #34d399;
    --color-overlay: rgba(0,0,0,0.7);
    --shadow-soft: 0 1px 6px rgba(0,0,0,0.3);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-strong: 0 8px 30px rgba(0,0,0,0.4);
    --shadow-focus: 0 1px 6px rgba(91,156,245,0.2);
    --color-shimmer: #FFFFFF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

a {
    color: var(--color-accent);
}

a:hover {
    color: var(--color-accent-hover);
}

/* Theme toggle button */
.theme-toggle {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--color-surface-alt);
    color: var(--color-muted-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

.theme-toggle:hover {
    background: var(--color-border);
    color: var(--color-text);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

/* Show moon in light mode, sun in dark mode */
.theme-icon-dark {
    display: none;
}

[data-theme="dark"] .theme-icon-light {
    display: none;
}

[data-theme="dark"] .theme-icon-dark {
    display: block;
}

[data-theme="dark"] .theme-toggle {
    background: var(--color-surface-subtle);
    color: var(--color-text-strong);
}

[data-theme="dark"] .theme-toggle:hover {
    background: var(--color-border-light);
}

@media (max-width: 768px) {
    .theme-toggle {
        top: 0.5rem;
        left: 0.5rem;
        width: 32px;
        height: 32px;
    }

    .theme-toggle svg {
        width: 16px;
        height: 16px;
    }
}