@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@700&family=Source+Code+Pro:wght@400;500&display=swap');

:root {
    --font-sans: 'Inter', sans-serif;
    --font-display: 'Roboto', sans-serif;
    --font-mono: 'Source Code Pro', monospace;

    /* Light Theme Colors */
    --color-primary: #007bff;
    --color-primary-darker: #0056b3;
    --color-accent: #28a745;
    --color-light-bg: #ffffff;
    --color-light-surface: #f8f9fa;
    --color-light-border: #dee2e6;
    --color-light-text: #212529;

    /* Dark Theme Colors */
    --color-primary-dark: #3b82f6;
    --color-primary-dark-darker: #2563eb;
    --color-dark-bg: #111827; /* Near black */
    --color-dark-surface: #1f2937; /* Dark gray */
    --color-dark-border: #374151;
    --color-dark-text: #f8f9fa;
}

/* Base styles for TailwindCSS theming */
.light {
    --primary: var(--color-primary);
    --primary-hover: var(--color-primary-darker);
    --primary-dark-theme: var(--color-primary-dark);
    --primary-dark-theme-hover: var(--color-primary-dark-darker);
    --accent: var(--color-accent);
    --bg: var(--color-light-bg);
    --surface: var(--color-light-surface);
    --border: var(--color-light-border);
    --text: var(--color-light-text);
}

.dark {
    --primary: var(--color-primary-dark);
    --primary-hover: var(--color-primary-dark-darker);
    --accent: var(--color-accent);
    --bg: var(--color-dark-bg);
    --surface: var(--color-dark-surface);
    --border: var(--color-dark-border);
    --text: var(--color-dark-text);
}


/* Tailwind custom configuration */
.tailwind-config {
    --tw-font-sans: var(--font-sans);
    --tw-font-display: var(--font-display);
    --tw-font-mono: var(--font-mono);

    /* Text colors */
    --tw-text-light-text: var(--color-light-text);
    --tw-text-dark-text: var(--color-dark-text);
    
    /* Background colors */
    --tw-bg-light-bg: var(--color-light-bg);
    --tw-bg-dark-bg: var(--color-dark-bg);
    --tw-bg-light-surface: var(--color-light-surface);
    --tw-bg-dark-surface: var(--color-dark-surface);

    /* Border colors */
    --tw-border-light-border: var(--color-light-border);
    --tw-border-dark-border: var(--color-dark-border);

    /* Accent colors */
    --tw-color-primary: var(--color-primary);
    --tw-color-primary-dark: var(--color-primary-dark);
    --tw-color-accent: var(--color-accent);
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        -webkit-tap-highlight-color: transparent;
    }
    body {
        @apply font-sans;
    }
    .font-display {
        font-family: var(--font-display);
    }
    .font-mono {
        font-family: var(--font-mono);
    }
}

@layer components {
    .nav-link {
        @apply font-medium text-light-text/70 dark:text-dark-text/70 hover:text-light-text dark:hover:text-dark-text transition-colors duration-200;
    }

    .btn-primary {
        @apply bg-primary text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary dark:bg-primary-dark dark:hover:bg-primary-dark-hover dark:focus:ring-primary-dark dark:ring-offset-dark-bg transition-all duration-200;
    }
    .btn-secondary {
        @apply bg-light-surface dark:bg-dark-surface text-light-text dark:text-dark-text font-semibold py-2 px-4 rounded-lg border border-light-border dark:border-dark-border hover:bg-light-border/40 dark:hover:bg-dark-border/40 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary dark:focus:ring-primary-dark dark:ring-offset-dark-bg transition-all duration-200;
    }
    .btn-lg {
        @apply py-3 px-6 text-base;
    }
    .btn-icon {
        @apply flex items-center bg-light-surface dark:bg-dark-surface text-sm text-light-text dark:text-dark-text font-semibold py-1 px-3 rounded-md border border-light-border dark:border-dark-border hover:bg-light-border/40 dark:hover:bg-dark-border/40 focus:outline-none transition-colors duration-200;
    }

    .form-input {
        @apply w-full px-3 py-2 bg-light-surface dark:bg-dark-surface border border-light-border dark:border-dark-border rounded-lg focus:ring-primary dark:focus:ring-primary-dark focus:border-primary dark:focus:border-primary-dark outline-none transition-colors;
    }

    .tab-btn {
        @apply flex items-center py-3 px-1 border-b-2 font-medium text-sm transition-colors duration-200;
        @apply text-light-text/60 dark:text-dark-text/60 border-transparent hover:text-light-text hover:dark:text-dark-text;
    }
    .tab-btn.active {
        @apply text-primary dark:text-primary-dark border-primary dark:border-primary-dark;
    }
    
    .tab-pane {
        @apply w-full;
    }

    .progress-bar-container {
        @apply flex-1 h-1.5 bg-light-border dark:bg-dark-border rounded-full overflow-hidden;
    }
    .progress-bar-fill {
        @apply h-full bg-accent rounded-full transition-all duration-500 ease-in-out;
    }
    
    .info-box {
        @apply flex items-start p-4 my-2 border rounded-lg;
    }
    .info-box-icon {
        @apply h-5 w-5 mr-3 mt-0.5 flex-shrink-0;
    }
    .info-box-error {
        @apply bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-500/30 text-red-800 dark:text-red-200;
    }
    .info-box-info {
        @apply bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-500/30 text-blue-800 dark:text-blue-200;
    }
}

@layer utilities {
    .animate-fade-in-up {
        animation: fade-in-up 0.6s ease-out forwards;
        opacity: 0;
    }

    @keyframes fade-in-up {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Sidebar transitions */
#sidebar.open {
    transform: translateX(0);
}

/* Quiz styles */
.quiz-option {
    @apply block w-full text-left p-4 my-2 border border-light-border dark:border-dark-border rounded-lg hover:bg-light-surface dark:hover:bg-dark-surface cursor-pointer transition-colors disabled:cursor-not-allowed;
}
.quiz-option.selected {
    @apply border-primary dark:border-primary-dark ring-2 ring-primary dark:ring-primary-dark;
}
.quiz-option.correct {
    @apply bg-green-100 dark:bg-green-900/50 border-accent dark:border-accent text-light-text dark:text-dark-text;
}
.quiz-option.incorrect {
    @apply bg-red-100 dark:bg-red-900/50 border-red-500 dark:border-red-500 text-light-text dark:text-dark-text;
}
#quiz-feedback {
    @apply mt-4 p-3 rounded-md text-sm font-medium;
}
#quiz-feedback.correct {
    @apply bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200;
}
#quiz-feedback.incorrect {
    @apply bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-200;
}

/* CodeMirror Styles */
.CodeMirror {
    font-family: var(--font-mono) !important;
    font-size: 0.875rem; /* text-sm */
    height: 20rem; /* h-80 */
    border: 1px solid var(--border);
    border-radius: 0.375rem; /* rounded-md */
}
.cm-s-material-darker.CodeMirror {
    background: var(--color-dark-surface);
    color: var(--color-dark-text);
}
.CodeMirror-gutters {
    background-color: var(--surface) !important;
    border-right: 1px solid var(--border) !important;
}
.cm-s-material-darker .CodeMirror-gutters {
    background: var(--color-dark-surface) !important;
}