:root {
    /* Light Theme */
    --light-primary: #4b5563;
    --light-secondary: #374151;
    --light-accent: #4f46e5;
    --light-bg: #f9fafb;
    --light-surface: #ffffff;
    --light-text: #111827;
    --light-secondary-text: #6b7280;
    --light-border: #e5e7eb;
    
    /* Dark Theme */
    --dark-primary: #9ca3af;
    --dark-secondary: #6b7280;
    --dark-accent: #6366f1;
    --dark-bg: #111827;
    --dark-surface: #1f2937;
    --dark-text: #f9fafb;
    --dark-secondary-text: #9ca3af;
    --dark-border: #4b5563;
}

/* Theme Variables */
body.light-mode {
    --primary: var(--light-primary);
    --secondary: var(--light-secondary);
    --accent: var(--light-accent);
    --bg: var(--light-bg);
    --surface: var(--light-surface);
    --text: var(--light-text);
    --secondary-text: var(--light-secondary-text);
    --border: var(--light-border);
    --link-color: #4f46e5;
    --link-hover-color: #4338ca;
    --link-visited-color: #5b50d6;
}

body.dark-mode {
    --primary: var(--dark-primary);
    --secondary: var(--dark-secondary);
    --accent: var(--dark-accent);
    --bg: var(--dark-bg);
    --surface: var(--dark-surface);
    --text: var(--dark-text);
    --secondary-text: var(--dark-secondary-text);
    --border: var(--dark-border);
    --link-color: #818cf8;
    --link-hover-color: #a5b4fc;
    --link-visited-color: #939bf9;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
    margin: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

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

a:visited {
    color: var(--link-visited-color);
}

a:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}