/* styles.css */

/* Define color variables. Light mode is default. */
:root {
    --color-bg: #B1DDC6;
    --color-text-primary: #1f2937; /* gray-800 */
    --color-text-secondary: #4b5563; /* gray-600 */
    --color-element-primary: white;
    --color-element-secondary: #f3f4f6; /* gray-100 */
    --color-element-tertiary: #d1d5db; /* gray-300 */
    --color-card-back: #27374D;
    --color-highlight-bg: #fef08a; /* yellow-200 */
    --color-highlight-hover-bg: #fde047; /* yellow-300 */
    --color-highlight-text: #1f2937;
    --color-correct-bg: #dcfce7; /* green-100 */
    --color-correct-border: #22c55e; /* green-500 */
    --color-correct-text: #166534; /* green-800 */
    --color-incorrect-bg: #fee2e2; /* red-100 */
    --color-incorrect-border: #ef4444; /* red-500 */
    --color-incorrect-text: #991b1b; /* red-800 */
}

/* Define dark mode colors when the .dark class is present */
.dark {
    --color-bg: #111827; /* gray-900 */
    --color-text-primary: #f9fafb; /* gray-50 */
    --color-text-secondary: #9ca3af; /* gray-400 */
    --color-element-primary: #1f2937; /* gray-800 */
    --color-element-secondary: #374151; /* gray-700 */
    --color-element-tertiary: #4b5563; /* gray-600 */
    --color-card-back: #374151; /* gray-700 */
    --color-highlight-bg: #facc15; /* yellow-400 */
    --color-highlight-hover-bg: #f59e0b; /* amber-500 */
    --color-highlight-text: #1f2937;
    --color-correct-bg: #166534; /* green-800 */
    --color-correct-border: #4ade80; /* green-400 */
    --color-correct-text: #f0fdf4; /* green-50 */
    --color-incorrect-bg: #991b1b; /* red-800 */
    --color-incorrect-border: #f87171; /* red-400 */
    --color-incorrect-text: #fef2f2; /* red-50 */
}

body {
    font-family: 'Inter', sans-serif;
    touch-action: manipulation;
    background-color: var(--color-bg);
    color: var(--color-text-primary);
}

/* --- Mode Switcher --- */
.mode-btn {
    transition: background-color 0.3s, color 0.3s;
    border: none;
    background-color: transparent;
    color: var(--color-text-secondary);
}
.mode-btn.active {
    background-color: var(--color-element-primary);
    color: var(--color-text-primary);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.dark .mode-btn.active {
    background-color: var(--color-element-secondary);
}

/* --- Learning Mode: Card --- */
.card-container {
    perspective: 1000px;
}
.card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}
.card.is-flipped {
    transform: rotateY(180deg);
}
.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s, color 0.3s;
}
.card-front {
    background-color: var(--color-element-primary);
    color: var(--color-text-primary);
}
.card-back {
    background-color: var(--color-card-back);
    color: white;
    transform: rotateY(180deg);
}

/* --- Quiz Mode Styles --- */
.quiz-option-btn {
    width: 100%;
    padding: 0.75rem;
    font-weight: 500;
    text-align: center;
    border: 2px solid var(--color-element-tertiary);
    background-color: var(--color-element-primary);
    color: var(--color-text-primary);
    border-radius: 0.75rem;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.quiz-option-btn:not(:disabled):hover {
    border-color: #3b82f6; /* blue-500 */
    background-color: var(--color-element-secondary);
}

.quiz-option-btn:disabled {
    cursor: not-allowed;
}

.quiz-option-btn.correct-option {
    background-color: var(--color-correct-bg);
    border-color: var(--color-correct-border);
    color: var(--color-correct-text);
    font-weight: 700;
}

.quiz-option-btn.incorrect-option {
    background-color: var(--color-incorrect-bg);
    border-color: var(--color-incorrect-border);
    color: var(--color-incorrect-text);
}


/* --- Shared Button Styles --- */
.nav-btn {
    padding: 1rem;
    background-color: var(--color-element-primary);
    color: var(--color-text-primary);
    border-radius: 9999px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: background-color 0.2s, transform 0.2s;
}
.nav-btn:hover {
    background-color: var(--color-element-secondary);
    transform: scale(1.1);
}

/* --- Test Mode --- */
#record-btn.is-recording {
    color: #ef4444; /* red-500 */
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

/* --- Result Modal --- */
#modal-content {
    background-color: var(--color-element-primary);
}
#modal-content.correct {
    border-top: 8px solid #16a34a; /* green-600 */
}
#modal-content.incorrect {
    border-top: 8px solid #dc2626; /* red-600 */
}
#result-title.correct {
    color: #16a34a;
}
#result-title.incorrect {
    color: #dc2626;
}

/* --- Highlight Style UPDATE --- */
.highlight {
    background-color: var(--color-highlight-bg);
    color: var(--color-highlight-text);
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    font-weight: 500;
    cursor: pointer; /* Indicates the keyword is clickable */
    transition: background-color 0.2s;
}

.highlight:hover {
    background-color: var(--color-highlight-hover-bg); /* Adds a hover effect */
}


/* --- Tailwind CSS Integration --- */
/* These classes are used in index.html to apply the CSS variables */
.bg-background { background-color: var(--color-bg); }
.bg-element-primary { background-color: var(--color-element-primary); }
.bg-element-secondary { background-color: var(--color-element-secondary); }
.text-text-primary { color: var(--color-text-primary); }
.text-text-secondary { color: var(--color-text-secondary); }
.border-element-tertiary { border-color: var(--color-element-tertiary); }
.dark\:text-blue-400 { } /* Placeholder for Tailwind JIT */
.dark .dark\:text-blue-400 { color: #60a5fa; }
.dark\:hover\:text-blue-400:hover { } /* Placeholder for Tailwind JIT */
.dark .dark\:hover\:text-blue-400:hover { color: #60a5fa; }