/* Theme Variables /
:root {
/ Light Theme */
--primary-color: #4361ee;
--primary-dark: #3a56d4;
--secondary-color: #7209b7;
--accent-color: #f72585;
--success-color: #4cc9f0;
--warning-color: #f8961e;
--danger-color: #f94144;

code
Code
download
content_copy
expand_less
/* Background Colors */
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--bg-tertiary: #e9ecef;
--bg-alt: #f1f3f9;

/* Text Colors */
--text-primary: #212529;
--text-secondary: #6c757d;
--text-muted: #adb5bd;
--text-light: #ffffff;

/* Border Colors */
--border-color: #dee2e6;
--border-light: #e9ecef;

/* Shadow */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
--shadow-xl: 0 20px 40px rgba(0,0,0,0.15);

/* Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;
--radius-full: 9999px;

/* Transitions */
--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
--transition-slow: 350ms ease;

/* Spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;

}

/* Dark Theme /
[data-theme="dark"] {
/ Background Colors */
--bg-primary: #121826;
--bg-secondary: #1e293b;
--bg-tertiary: #334155;
--bg-alt: #1a2332;

code
Code
download
content_copy
expand_less
/* Text Colors */
--text-primary: #f8fafc;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--text-light: #ffffff;

/* Border Colors */
--border-color: #334155;
--border-light: #475569;

/* Shadow */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
--shadow-md: 0 4px 6px rgba(0,0,0,0.3);
--shadow-lg: 0 10px 25px rgba(0,0,0,0.35);
--shadow-xl: 0 20px 40px rgba(0,0,0,0.4);

}

/* Base Styles */

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

html {
font-size: 16px;
scroll-behavior: smooth;
}

body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: var(--text-primary);
background-color: var(--bg-primary);
transition: background-color var(--transition-normal), color var(--transition-normal);
overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.2;
margin-bottom: var(--space-md);
color: var(--text-primary);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
margin-bottom: var(--space-md);
color: var(--text-secondary);
}

a {
color: var(--primary-color);
text-decoration: none;
transition: color var(--transition-fast);
}

a:hover {
color: var(--primary-dark);
}

/* Container */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-lg);
}

/* Utility Classes */
.bg-alt {
background-color: var(--bg-alt);
}

.text-center {
text-align: center;
}

.text-muted {
color: var(--text-muted);
}