/*
 * Cebuano Flashcards - Custom Theme for cebuanolang.com
 * Matches main site color scheme: rgb(167, 79, 1)
 */

:root {
    /* Main site colors */
    --brand-orange: rgb(167, 79, 1);
    --brand-orange-dark: rgb(137, 59, 1);
    --brand-orange-light: rgb(197, 99, 21);
    --text-black: #000000;
    --text-white: #ffffff;
    --background-light: #f8f9fa;
    --border-color: #dee2e6;
}

/* === CONTROL PANEL === */
.cebuano-controls {
    background: var(--background-light);
    border: 1px solid var(--border-color);
}

.control-group label {
    color: var(--text-black);
}

.control-group select {
    border-color: var(--border-color);
    color: var(--text-black);
    background-color: var(--text-white);
}

.control-group select:focus {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 3px rgba(167, 79, 1, 0.1);
}

/* === SHUFFLE BUTTON === */
.btn-primary {
    background: var(--brand-orange);
    background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
    color: var(--text-white);
    box-shadow: 0 4px 12px rgba(167, 79, 1, 0.3);
}

.btn-primary:hover {
    background: var(--brand-orange-dark);
    box-shadow: 0 6px 16px rgba(167, 79, 1, 0.4);
}

/* === STATS COUNTER === */
.cebuano-stats {
    color: #666;
}

#current-card-num {
    color: var(--brand-orange);
}

/* === FLASHCARD COLORS === */

/* Front of card - Orange/Brown brand color */
.flashcard-front {
    background: var(--brand-orange);
    background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
    color: var(--text-white);
}

/* Back of card - White with black text */
.flashcard-back {
    background: var(--text-white);
    color: var(--text-black);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Card content on white background */
.flashcard-back .card-content {
    color: var(--text-black);
}

.flashcard-back .card-word {
    color: var(--text-black);
}

.flashcard-back .card-pronunciation {
    color: var(--brand-orange);
    opacity: 1;
}

.flashcard-back .card-definition {
    color: var(--text-black);
}

.flashcard-back .card-sample {
    color: #333;
}

.flashcard-back .card-category {
    color: var(--brand-orange);
}

/* === NAVIGATION BUTTONS === */
.nav-btn {
    border-color: var(--brand-orange);
    color: var(--brand-orange);
    background: var(--text-white);
}

.nav-btn:hover:not(:disabled) {
    background: var(--brand-orange);
    color: var(--text-white);
    box-shadow: 0 4px 12px rgba(167, 79, 1, 0.3);
}

.nav-btn:disabled {
    border-color: var(--border-color);
    color: #999;
    opacity: 0.4;
}

/* === PRONUNCIATION CHOICE BUTTONS === */
.pronunciation-btn {
    background: var(--brand-orange);
    border: 2px solid var(--brand-orange-dark);
    color: var(--text-white);
}

.pronunciation-btn:hover {
    background: var(--brand-orange-dark);
    border-color: var(--brand-orange);
    transform: translateX(5px);
}

/* === LOADING SPINNER === */
.spinner {
    border-color: #f3f3f3;
    border-top-color: var(--brand-orange);
}

/* === FOCUS STATES === */
button:focus,
select:focus {
    outline-color: var(--brand-orange);
}

.flashcard:focus {
    outline-color: var(--brand-orange);
}

/* === TAP HINT === */
.tap-hint {
    color: rgba(255, 255, 255, 0.9);
}

/* === CATEGORY BADGE === */
.card-category {
    color: rgba(255, 255, 255, 0.9);
}