/* ============================================
   VTO READING - THEME SYSTEM
   Dark and light mode definitions
   ============================================ */

/* ==================
   DARK THEME
   ================== */
[data-theme="dark"] {
    /* Backgrounds - dark slate grey */
    --bg-primary: #1a202c;
    --bg-secondary: #2d3748;
    --bg-card: #2d3748;
    --bg-card-hover: #3d4a5c;
    
    /* Borders */
    --border-color: #3d4a5c;

    /* Neutral greys */
    --grey-light: #4a5568;
    --grey-light-hover: #5a6578;
    
    /* Text */
    --text-primary: #f0f4f8;
    --text-secondary: #9aa5b1;
    --text-muted: #6b7785;
    
    /* Accent */
    --accent-primary: var(--vto-teal);
    --accent-secondary: var(--vto-teal-dark);
    --accent-soft: rgba(8, 192, 222, 0.15);
    
    /* Semantic */
    --success: var(--vto-green);
    --success-soft: rgba(76, 175, 124, 0.15);
    --warning: var(--vto-orange);
    --warning-soft: rgba(247, 143, 56, 0.15);
    --danger: var(--vto-red);
    --danger-soft: rgba(221, 64, 49, 0.15);
    --info: var(--vto-teal);
    --info-soft: rgba(8, 192, 222, 0.15);
}

/* ==================
   LIGHT THEME (Default)
   ================== */
[data-theme="light"] {
    /* Backgrounds */
    --bg-primary: var(--vto-cream);
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: var(--vto-cream-warm);
    
    /* Borders */
    --border-color: #e2e8f0;

    /* Neutral greys */
    --grey-light: #e2e8f0;
    --grey-light-hover: #cbd5e0;
    
    /* Text */
    --text-primary: var(--vto-navy);
    --text-secondary: #4a6275;
    --text-muted: #6b8294;
    
    /* Accent */
    --accent-primary: var(--vto-teal-dark);
    --accent-secondary: var(--vto-teal);
    --accent-soft: rgba(8, 192, 222, 0.12);
    
    /* Semantic */
    --success: var(--vto-green);
    --success-soft: rgba(76, 175, 124, 0.12);
    --warning: #d97a2a;
    --warning-soft: rgba(247, 143, 56, 0.12);
    --danger: var(--vto-burgundy);
    --danger-soft: rgba(155, 46, 56, 0.12);
    --info: var(--vto-teal-dark);
    --info-soft: rgba(0, 146, 200, 0.12);
}

/* ==================
   THEME TRANSITIONS
   ================== */
body,
.dashboard-card,
.stat-card,
.btn-vto,
.btn-vto-light,
.badge-vto,
.data-table {
    transition: background var(--transition-base), 
                border-color var(--transition-base), 
                color var(--transition-base);
}