:root {
    /* Colors — Premium Warm Palette */
    --color-bg: #F8F6F1;
    --color-surface: #FFFFFF;
    --color-surface-alt: #F3F0EA;
    --color-text-primary: #1A1A1A;
    --color-text-secondary: #555555;
    --color-text-muted: #8C8C8C;
    
    --color-primary: #2D5A8E;
    --color-primary-hover: #1E4470;
    --color-primary-light: rgba(45, 90, 142, 0.08);
    --color-primary-glow: rgba(45, 90, 142, 0.15);
    
    --color-accent: #C4956A;
    --color-accent-light: #FDF4E5;
    --color-success: #3A8F6B;
    --color-success-light: rgba(58, 143, 107, 0.1);
    
    --color-secondary: #F0F2F5;
    --color-secondary-hover: #E4E7EB;
    
    --color-border: #E2D8CC;
    --color-border-light: #EDE8E0;
    
    /* Typography */
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-8: 4rem;
    --space-12: 6rem;
    
    /* Shadows — Refined */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.08);
    --shadow-xl: 0 24px 48px rgba(0,0,0,0.1);
    --shadow-glow: 0 0 0 3px var(--color-primary-glow);
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    
    /* Transitions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --transition-fast: 150ms var(--ease-out-expo);
    --transition-base: 250ms var(--ease-out-expo);
    --transition-slow: 400ms var(--ease-out-expo);
    
    /* Sidebar */
    --sidebar-width: 300px;
    --sidebar-width-tablet: 240px;
}

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

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text-primary);
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    list-style: none;
}

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* When in study view, allow full width for sidebar layout */
.container.study-layout {
    max-width: 1320px;
}

/* SPA Views */
.view {
    display: none;
}

.view.active {
    display: block;
    animation: viewEnter 0.5s var(--ease-out-expo);
}

@keyframes viewEnter {
    from { 
        opacity: 0; 
        transform: translateY(12px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Slide transitions */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-enter-next {
    animation: slideInRight 0.4s var(--ease-out-expo);
}

.slide-enter-prev {
    animation: slideInLeft 0.4s var(--ease-out-expo);
}

.slide-enter {
    animation: fadeInUp 0.35s var(--ease-out-expo);
}

/* Utility: visually hidden */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* ===========================
   DARK MODE
   =========================== */
[data-theme="dark"] {
    --color-bg: #111318;
    --color-surface: #1A1D24;
    --color-surface-alt: #22252E;
    --color-text-primary: #E8E6E1;
    --color-text-secondary: #A0A0A0;
    --color-text-muted: #6B6B6B;
    
    --color-primary: #5B9BD5;
    --color-primary-hover: #7BB3E5;
    --color-primary-light: rgba(91, 155, 213, 0.12);
    --color-primary-glow: rgba(91, 155, 213, 0.2);
    
    --color-accent: #D4A574;
    --color-accent-light: rgba(212, 165, 116, 0.1);
    --color-success: #5CB88A;
    --color-success-light: rgba(92, 184, 138, 0.12);
    
    --color-secondary: #252830;
    --color-secondary-hover: #2E313A;
    
    --color-border: #2E323C;
    --color-border-light: #282C35;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.4);
    --shadow-xl: 0 24px 48px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 0 3px var(--color-primary-glow);
}

/* Dark mode body */
[data-theme="dark"] body {
    color-scheme: dark;
}

/* Navbar dark override */
[data-theme="dark"] .navbar {
    background-color: rgba(17, 19, 24, 0.88);
}

[data-theme="dark"] .navbar.scrolled {
    border-bottom-color: var(--color-border);
}

/* Notebook dark override */
[data-theme="dark"] .notebook {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    border-left-color: #3A3D46;
    background-image: linear-gradient(var(--color-surface-alt) 1px, transparent 1px);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .notebook::before {
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 15px,
        #3A3D46 15px,
        #3A3D46 20px
    );
}

/* Editorial overrides */
[data-theme="dark"] .editorial-highlight {
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.08) 0%, rgba(212, 165, 116, 0.03) 100%);
    color: var(--color-accent);
    border-left-color: var(--color-accent);
}

[data-theme="dark"] .editorial-quote {
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.06) 0%, transparent 100%);
    border-left-color: var(--color-accent);
    color: var(--color-text-primary);
}

[data-theme="dark"] .editorial-table-wrapper {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .editorial-table th {
    background-color: var(--color-surface-alt);
}

[data-theme="dark"] .editorial-table td {
    border-top-color: var(--color-border);
}

/* Quiz dark overrides */
[data-theme="dark"] .quiz-option {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .quiz-feedback-wrong {
    background: rgba(217, 79, 79, 0.1);
    color: #F08080;
    border-color: rgba(217, 79, 79, 0.2);
}

[data-theme="dark"] .quiz-option-wrong {
    border-color: #C04040;
    background: rgba(217, 79, 79, 0.1);
}

/* Mac buttons in dark */
[data-theme="dark"] .subject-card-header {
    background-color: var(--color-surface-alt);
}

/* SVG check marks */
[data-theme="dark"] .feature-list svg path {
    stroke: var(--color-success);
}

/* Study card dark */
[data-theme="dark"] .study-card {
    background: var(--color-surface);
}