/**
 * Dark Mode Styles - Frontend (Phase 3)
 *
 * CSS custom properties for theming system with smooth transitions.
 * Supports light, dark, and auto (prefers-color-scheme) modes.
 *
 * @package CraftedByGod_Devotionals
 * @since   1.9.0
 */

/* ============================================
   CSS Custom Properties (Light Mode Default)
   ============================================ */
:root {
    /* Background colors */
    --cbg-bg-primary: #ffffff;
    --cbg-bg-secondary: #f8f9fa;
    --cbg-bg-tertiary: #e9ecef;
    --cbg-bg-hover: #f0f2f4;
    
    /* Text colors */
    --cbg-text-primary: #212529;
    --cbg-text-secondary: #6c757d;
    --cbg-text-muted: #868e96;
    --cbg-text-inverse: #ffffff;
    
    /* Border colors */
    --cbg-border-light: #dee2e6;
    --cbg-border-medium: #ced4da;
    --cbg-border-dark: #adb5bd;
    
    /* Brand colors */
    --cbg-primary: #007bff;
    --cbg-primary-hover: #0056b3;
    --cbg-success: #28a745;
    --cbg-warning: #ffc107;
    --cbg-danger: #dc3545;
    --cbg-info: #17a2b8;
    
    /* Shadow colors */
    --cbg-shadow-sm: rgba(0, 0, 0, 0.075);
    --cbg-shadow-md: rgba(0, 0, 0, 0.15);
    --cbg-shadow-lg: rgba(0, 0, 0, 0.25);
    
    /* Transition properties */
    --cbg-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Dark Mode Properties
   ============================================ */
body.cbg-theme-dark,
body.cbg-theme-auto {
    /* Auto mode will use media query below */
}

@media (prefers-color-scheme: dark) {
    body.cbg-theme-auto {
        /* Background colors */
        --cbg-bg-primary: #1a1d23;
        --cbg-bg-secondary: #2d3139;
        --cbg-bg-tertiary: #3a3f4a;
        --cbg-bg-hover: #4a5060;
        
        /* Text colors */
        --cbg-text-primary: #e9ecef;
        --cbg-text-secondary: #adb5bd;
        --cbg-text-muted: #868e96;
        --cbg-text-inverse: #1a1d23;
        
        /* Border colors */
        --cbg-border-light: #3a3f4a;
        --cbg-border-medium: #4a5060;
        --cbg-border-dark: #5a6070;
        
        /* Shadow colors */
        --cbg-shadow-sm: rgba(0, 0, 0, 0.3);
        --cbg-shadow-md: rgba(0, 0, 0, 0.5);
        --cbg-shadow-lg: rgba(0, 0, 0, 0.7);
    }
}

body.cbg-theme-dark {
    /* Background colors */
    --cbg-bg-primary: #1a1d23;
    --cbg-bg-secondary: #2d3139;
    --cbg-bg-tertiary: #3a3f4a;
    --cbg-bg-hover: #4a5060;
    
    /* Text colors */
    --cbg-text-primary: #e9ecef;
    --cbg-text-secondary: #adb5bd;
    --cbg-text-muted: #868e96;
    --cbg-text-inverse: #1a1d23;
    
    /* Border colors */
    --cbg-border-light: #3a3f4a;
    --cbg-border-medium: #4a5060;
    --cbg-border-dark: #5a6070;
    
    /* Shadow colors */
    --cbg-shadow-sm: rgba(0, 0, 0, 0.3);
    --cbg-shadow-md: rgba(0, 0, 0, 0.5);
    --cbg-shadow-lg: rgba(0, 0, 0, 0.7);
}

/* ============================================
   Apply Theme Variables
   ============================================ */
body,
.devotional-content,
.cbg-reading-plan-card,
.cbg-devotional-card {
    background-color: var(--cbg-bg-primary);
    color: var(--cbg-text-primary);
    transition: var(--cbg-transition);
}

.devotional-header,
.cbg-card-header,
.cbg-section-header {
    background-color: var(--cbg-bg-secondary);
    border-bottom: 1px solid var(--cbg-border-light);
    color: var(--cbg-text-primary);
}

.devotional-sidebar,
.cbg-sidebar,
.cbg-widget {
    background-color: var(--cbg-bg-secondary);
    border: 1px solid var(--cbg-border-light);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--cbg-text-primary);
}

p, span, div {
    color: var(--cbg-text-primary);
}

.text-muted,
.cbg-text-secondary {
    color: var(--cbg-text-secondary) !important;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
    background-color: var(--cbg-bg-secondary);
    color: var(--cbg-text-primary);
    border: 1px solid var(--cbg-border-medium);
    transition: var(--cbg-transition);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    background-color: var(--cbg-bg-primary);
    border-color: var(--cbg-primary);
    outline: 2px solid var(--cbg-primary);
    outline-offset: 2px;
}

/* Buttons */
.btn,
button,
.button {
    transition: var(--cbg-transition);
}

.btn:hover,
button:hover,
.button:hover {
    filter: brightness(1.1);
}

/* Cards */
.card,
.cbg-card {
    background-color: var(--cbg-bg-secondary);
    border: 1px solid var(--cbg-border-light);
    box-shadow: 0 2px 4px var(--cbg-shadow-sm);
    transition: var(--cbg-transition);
}

.card:hover,
.cbg-card:hover {
    box-shadow: 0 4px 8px var(--cbg-shadow-md);
}

/* Links */
a {
    color: var(--cbg-primary);
    transition: var(--cbg-transition);
}

a:hover {
    color: var(--cbg-primary-hover);
}

/* ============================================
   Dark Mode Toggle Component
   ============================================ */
.cbg-dark-mode-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--cbg-primary), var(--cbg-primary-hover));
    border-radius: 50%;
    box-shadow: 0 4px 12px var(--cbg-shadow-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: var(--cbg-transition);
}

.cbg-dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px var(--cbg-shadow-lg);
}

.cbg-dark-mode-toggle:focus {
    outline: 3px solid var(--cbg-primary);
    outline-offset: 4px;
}

.cbg-dark-mode-toggle:active {
    transform: scale(0.95);
}

.cbg-toggle-icon {
    font-size: 28px;
    position: absolute;
    transition: var(--cbg-transition);
}

.cbg-icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.cbg-icon-moon {
    opacity: 0;
    transform: rotate(180deg) scale(0);
}

body.cbg-theme-dark .cbg-icon-sun,
body.cbg-theme-auto .cbg-icon-sun {
    opacity: 0;
    transform: rotate(-180deg) scale(0);
}

body.cbg-theme-dark .cbg-icon-moon,
body.cbg-theme-auto .cbg-icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

@media (prefers-color-scheme: dark) {
    body.cbg-theme-auto .cbg-icon-sun {
        opacity: 0;
        transform: rotate(-180deg) scale(0);
    }

    body.cbg-theme-auto .cbg-icon-moon {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .cbg-dark-mode-toggle {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }

    .cbg-toggle-icon {
        font-size: 24px;
    }
}

/* ============================================
   Smooth Page Transition
   ============================================ */
* {
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Preserve animation transitions */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ============================================
   Accessibility Improvements
   ============================================ */

/* High contrast focus indicators */
*:focus-visible {
    outline: 3px solid var(--cbg-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Skip link */
.cbg-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--cbg-primary);
    color: var(--cbg-text-inverse);
    padding: 12px 20px;
    text-decoration: none;
    z-index: 10000;
    transition: top 0.2s;
}

.cbg-skip-link:focus {
    top: 0;
}

/* Screen reader only */
.cbg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   Print Styles (Always Light Mode)
   ============================================ */
@media print {
    body,
    .devotional-content,
    .cbg-card {
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    .cbg-dark-mode-toggle {
        display: none !important;
    }
}