/* --- CSS Variables (Color Palette) --- */

/* Force scrollbar to prevent layout shift */
html {
    overflow-y: scroll;
}

/* DEFAULT (DARK MODE) */
:root {
    --color-primary: #4f6dff; /* Brighter blue for dark mode */
    --color-primary-light: #2a3b7d;
    --color-primary-dark: #3a5bf0;
    --color-secondary: #ffcd1f; /* Quizlet Yellow */
    --color-secondary-light: #443c1c; /* NEW: for 'close' bg */
    
    --color-bg: #0a092b; /* Dark Blue Background */
    --color-bg-secondary: #1a2342; /* Slightly lighter bg */
    --color-card-bg: #232e54; /* Card Background */
    --color-text-primary: #ffffff; /* White text */
    --color-text-secondary: #f0f3ff; /* Light text */
    --color-border: #3a497c;
    
    --color-correct: #38c172;
    --color-correct-light: #1f4f31;
    --color-incorrect: #e3342f;
    --color-incorrect-light: #52201f;

    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.2);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.3);

    --border-radius-card: 24px;
    --border-radius-button: 12px;
}

/* LIGHT MODE OVERRIDES */
body.light-mode {
    --color-primary: #4257b2;
    --color-primary-light: #f0f3ff;
    --color-primary-dark: #3a4b99;
    --color-secondary: #f2b000;
    --color-secondary-light: #fffbeb;
    
    --color-bg: #f6f7fb;
    --color-bg-secondary: #ffffff;
    --color-card-bg: #ffffff;
    --color-text-primary: #303545;
    --color-text-secondary: #586380;
    --color-border: #e4e7eb;
    
    --color-correct: #28a745;
    --color-correct-light: #e9f6eb;
    --color-incorrect: #dc3545;
    --color-incorrect-light: #fbebed;

    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(48,53,69,0.1);
    --shadow-lg: 0 10px 30px rgba(48,53,69,0.15);
}

/* --- Base Styles --- */
body {
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin: 0;
    padding: 0;
}

/* Disable text selection by default on all pages except the privacy page */
body:not(.privacy) {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Allow selection on text inputs and editable content */
input, textarea, [contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* Main Application Container */
#app-container {
    max-width: 896px; /* Matches max-w-4xl */
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
    position: relative;
}

/* Universal box sizing */
*, *::before, *::after {
    box-sizing: border-box;
}