/* --- Base Theme Styles --- */
.theme-card {
    background-color: white;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.theme-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.theme-card.active {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.4);
}

.theme-swatch-container {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.swatch {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.1);
}

.theme-name {
    font-size: 1.125rem;
    font-weight: 600;
}

/* --- THEME DEFINITIONS --- */

/* Default Theme */
.theme-default {
    --color-bg: #f8f9fa;
    --color-base: #ffffff;
    --color-base-secondary: #f8f9fa;
    --color-text: #1f2937;
    --color-text-light: #4b5563;
    --color-accent: #4f46e5;
    --color-border: #d1d5db;
    --color-correct: #10b981;
    --color-incorrect: #ef4444;
}

/* Midnight Theme */
.theme-dark {
    --color-bg: #111827;
    --color-base: #1f2937;
    --color-base-secondary: #374151;
    --color-text: #d1d5db;
    --color-text-light: #9ca3af;
    --color-accent: #60a5fa;
    --color-border: #4b5563;
    --color-correct: #34d399;
    --color-incorrect: #f87171;
}

/* Forest Theme */
.theme-forest {
    --color-bg: #f0fff4;
    --color-base: #ffffff;
    --color-base-secondary: #e6fffa;
    --color-text: #064e3b;
    --color-text-light: #047857;
    --color-accent: #059669;
    --color-border: #a7f3d0;
    --color-correct: #10b981;
    --color-incorrect: #f59e0b;
}

/* Rose Petal Theme */
.theme-rose {
    --color-bg: #fff1f2;
    --color-base: #ffffff;
    --color-base-secondary: #ffe4e6;
    --color-text: #881337;
    --color-text-light: #be185d;
    --color-accent: #f43f5e;
    --color-border: #fecdd3;
    --color-correct: #ec4899;
    --color-incorrect: #8b5cf6;
}

/* --- Theme Variable Application --- */
.bg-theme-bg {
    background-color: var(--color-bg);
}

.bg-theme-base {
    background-color: var(--color-base);
}

.bg-theme-base-secondary {
    background-color: var(--color-base-secondary);
}

.text-theme-text {
    color: var(--color-text);
}

.text-theme-text-light {
    color: var(--color-text-light);
}

.text-theme-accent {
    color: var(--color-accent);
}

.bg-theme-accent {
    background-color: var(--color-accent);
}

.border-theme-border {
    border-color: var(--color-border);
}

.ring-theme-accent {
    --tw-ring-color: var(--color-accent);
}

/* Applying theme to typing test elements specifically */
#theme-preview-container #text-display {
    word-break: break-all;
    /* This is the fix */
}

#theme-preview-container .letter.correct,
#typing-test-container .letter.correct {
    color: var(--color-correct);
}

#theme-preview-container .letter.incorrect,
#typing-test-container .letter.incorrect {
    color: var(--color-incorrect);
}

#theme-preview-container .word.active::before {
    background-color: var(--color-accent);
}