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

:root {
    /* Primary Colors */
    --primary-text: #1c1d1f;
    --secondary-text: #6a6f73;
    --accent-blue: #2896ff;
    --accent-light-blue: #e5f3ff;
    
    /* Background Colors */
    --background-white: #ffffff;
    --background-light: #f8f9fb;
    --background-card: #ffffff;
    
    /* Border Colors */
    --border-light: #e6e8eb;
    --border-hover: #2896ff;
    
    /* Button Colors */
    --button-primary: #2896ff;
    --button-primary-hover: #1a7fd1;
    --button-secondary: #f8f9fb;
    --button-secondary-hover: #eceef2;
    
    /* Text Colors */
    --text-primary: #1c1d1f;
    --text-secondary: #6a6f73;
    --text-light: #8b8b8b;
    
    /* Course Card Colors */
    --course-card-bg: #ffffff;
    --course-title: #1c1d1f;
    --course-text: #6a6f73;
    
    /* Other */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --container-width: 1200px;
    --header-height: 72px;
    
    /* Breakpoints */
    --mobile: 480px;
    --tablet: 768px;
    --desktop: 1024px;
    --wide: 1200px;
    
    /* Colors */
    --primary-color: #2896ff;
    --secondary-color: #6a6f73;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --error-color: #dc3545;
    
    /* Typography */
    --font-primary: system-ui, -apple-system, sans-serif;
    --font-monospace: 'Fira Code', monospace;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 4rem;
}

body {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--primary-text);
    line-height: 1.5;
    background-color: var(--background-white);
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 100%;
    padding: 0 16px;
    margin: 0 auto;
}

/* Responsive containers */
@media (min-width: 768px) {
    .container {
        padding: 0 24px;
        max-width: var(--tablet);
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 32px;
        max-width: var(--desktop);
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: var(--wide);
    }
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

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