/* ==========================================
   ¡APRENDE! - UNIFIED COLOR SYSTEM
   ========================================== */

:root {
    /* ==========================================
       BACKGROUND COLORS - WARM WHITE
       ========================================== */
    --bg-page: #FFF9F7;
    --bg-card: #FFFFFF;
    --bg-input: #FFFFFF;
    --bg-hover: #FFF5F2;
    --bg-active: #FFEFEB;
    
    /* ==========================================
       BORDER COLORS
       ========================================== */
    --border-light: #E8E0DD;
    --border-medium: #D8D0CD;
    --border-dark: #C8C0BD;
    
    /* ==========================================
       TEXT COLORS
       ========================================== */
    --text-primary: #2A2A2A;
    --text-secondary: #4A4A4A;
    --text-tertiary: #9E9E9E;
    --text-disabled: #C0C0C0;
	
    
    /* ==========================================
       BUTTON COLORS
       ========================================== */
    --btn-primary-bg: #4A4A4A;
    --btn-primary-hover: #2A2A2A;
    --btn-primary-text: #FFFFFF;
    
    --btn-secondary-bg: #FFFFFF;
    --btn-secondary-hover: #FFF5F2;
    --btn-secondary-text: #2A2A2A;
    --btn-secondary-border: #E8E0DD;
    
    /* ==========================================
       ACCENT & STATUS COLORS
       ========================================== */
    --accent: #8B9A8F;
    
    --success: #4CAF50;
    --success-light: #E8F5E9;
    
    --error: #E53935;
    --error-light: #FFEBEE;
    
    --warning: #FB8C00;
    --warning-light: #FFF3E0;
    
    --info: #2196F3;
    --info-light: #E3F2FD;
    
    /* ==========================================
       SHADOWS
       ========================================== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.08);
    
    /* ==========================================
       SPECIAL ELEMENTS
       ========================================== */
    --card-back-bg: #4A4A4A;
    --card-back-text: #FFFFFF;
    
    --toggle-bg: #E8E0DD;
    --toggle-slider: #FFFFFF;
    
    --progress-bg: #E8E0DD;
    --progress-fill: #4A4A4A;
    
    --overlay-bg: rgba(42, 42, 42, 0.4);
	
}

/* ==========================================
   FORCE BACKGROUND ON ALL PAGES
   ========================================== */
html,
body,
.home-page,
.flashcards-page,
.quiz-page,
.edit-page,
.about-page {
    background: #FFF9F7 !important;
    background-color: #FFF9F7 !important;
    background-image: none !important;
}


/* ==========================================
   FLASHCARDS PAGE - NAVIGATION BAR STYLE
   ========================================== */

.flashcards-page {
    /* Flashcard colors */
    --flashcard-front-bg: transparent; /* CHANGED */
    --flashcard-front-border: #E8E0DD;
    --flashcard-back-bg: #222221; /* CHANGED - dark like active buttons */
    --flashcard-back-text: #FFF9F7; /* CHANGED - warm white text */
    
    /* Button colors - MATCH NAV BAR */
    --button-bg: transparent;
    --button-border: #888888;
    --button-hover-bg: rgba(0, 0, 0, 0.04);
    --button-hover-border: #666666;
    --button-text: #2A2A2A;
    
    /* Set bar colors */
    --set-bar-bg: transparent;
    --set-bar-border: #888888;
    
    /* Active button colors */
    --set-btn-active-bg: #222221;
    --set-btn-active-text: #FFF9F7;
    --set-btn-active-border: #222221;
    
    /* Progress bar colors */
    --progress-bg-custom: #E8E0DD;
    --progress-fill-custom: #4A4A4A;
}