/**
 * Theme CSS - Dark/Light Mode Support
 * Only loaded on blog pages (blog.html and post.html)
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Color Tokens)
   ============================================ */

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --bg-card: #ffffff;
    --bg-header: rgba(255, 255, 255, 0.5);
    --bg-mobile-menu: #ffffff;
    
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-tertiary: #6b7280;
    --text-muted: #9ca3af;
    
    --border-primary: #e5e7eb;
    --border-secondary: rgba(255, 255, 255, 0.2);
    
    --skeleton-bg: #e5e7eb;
    
    /* Post content */
    --code-bg: #f3f4f6;
    --code-text: inherit;
    --pre-bg: #1f2937;
    --pre-text: #f9fafb;
    --blockquote-bg: #f9fafb;
    --blockquote-text: #4b5563;
    --table-header-bg: #f9fafb;
    --table-border: #e5e7eb;
    
    /* UI elements */
    --social-bg: #f3f4f6;
    --social-text: #6b7280;
    --scroll-btn-bg: #ffffff;
    --scroll-btn-border: #e5e7eb;
    --scroll-btn-text: #4b5563;
}

/* ============================================
   DARK THEME TOKENS
   ============================================ */

html.dark {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-card: #1e293b;
    --bg-header: rgba(15, 23, 42, 0.8);
    --bg-mobile-menu: #0f172a;
    
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --text-muted: #64748b;
    
    --border-primary: #334155;
    --border-secondary: rgba(51, 65, 85, 0.5);
    
    --skeleton-bg: #334155;
    
    /* Post content */
    --code-bg: #334155;
    --code-text: #e2e8f0;
    --pre-bg: #0f172a;
    --pre-text: #e2e8f0;
    --blockquote-bg: #1e293b;
    --blockquote-text: #94a3b8;
    --table-header-bg: #1e293b;
    --table-border: #334155;
    
    /* UI elements */
    --social-bg: #334155;
    --social-text: #94a3b8;
    --scroll-btn-bg: #1e293b;
    --scroll-btn-border: #334155;
    --scroll-btn-text: #94a3b8;
}

/* ============================================
   BASE OVERRIDES
   ============================================ */

html.dark body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

html.dark .min-h-screen {
    background-color: var(--bg-secondary);
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

html.dark #header-container {
    background-color: var(--bg-header);
    border-color: var(--border-secondary);
}

html.dark #header-container.bg-white\/90 {
    background-color: rgba(15, 23, 42, 0.95) !important;
}

html.dark #header-container.border-gray-200 {
    border-color: var(--border-primary) !important;
}

html.dark .nav-link,
html.dark #mobile-menu-btn {
    color: var(--text-tertiary);
}

html.dark .nav-link:hover {
    color: #10b981;
    background-color: rgba(16, 185, 129, 0.1);
}

html.dark .nav-link.bg-gray-900 {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

html.dark #mobile-menu {
    background-color: var(--bg-mobile-menu);
}

html.dark .mobile-nav-link {
    color: var(--text-primary);
    border-color: var(--border-primary);
}

/* ============================================
   TAILWIND UTILITY OVERRIDES
   ============================================ */

html.dark .bg-white {
    background-color: var(--bg-card);
}

html.dark .bg-gray-50 {
    background-color: var(--bg-secondary);
}

html.dark .bg-gray-200 {
    background-color: var(--skeleton-bg);
}

html.dark .text-gray-900 {
    color: var(--text-primary);
}

html.dark .text-gray-600,
html.dark .text-gray-500 {
    color: var(--text-tertiary);
}

html.dark .text-gray-400 {
    color: var(--text-muted);
}

html.dark .border-gray-100,
html.dark .border-gray-200 {
    border-color: var(--border-primary);
}

html.dark .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

html.dark .hover\:bg-gray-100:hover {
    background-color: var(--bg-tertiary);
}

html.dark .hover\:bg-gray-100\/50:hover {
    background-color: rgba(51, 65, 85, 0.5);
}

/* ============================================
   PAGE SECTIONS
   ============================================ */

html.dark #home {
    background-color: var(--bg-primary);
}

html.dark #home .bg-white\/30 {
    background-color: rgba(15, 23, 42, 0.5);
}

html.dark #home .bg-gradient-to-t {
    background: linear-gradient(to top, var(--bg-primary), transparent, var(--bg-primary));
}

html.dark #featured-blogs,
html.dark #post-content,
html.dark #post-skeleton,
html.dark #post-error {
    background-color: var(--bg-primary);
}

html.dark #blogs-list,
html.dark #related-posts {
    background-color: var(--bg-secondary);
}

html.dark #featured-blogs h2,
html.dark #blogs-list h2,
html.dark #related-posts h2,
html.dark #home h1,
html.dark #post-title,
html.dark #author-name {
    color: var(--text-primary);
}

html.dark #post-date,
html.dark #post-reading-time {
    color: var(--text-tertiary);
}

html.dark #author-box {
    border-color: var(--border-primary);
}

html.dark .group:hover h3,
html.dark .group:hover h4 {
    color: #10b981;
}

/* Grid pattern */
html.dark .bg-grid-pattern {
    opacity: 0.3;
    background-image: linear-gradient(var(--border-primary) 1px, transparent 1px),
                      linear-gradient(90deg, var(--border-primary) 1px, transparent 1px);
}

/* ============================================
   SOCIAL SHARE BUTTONS
   ============================================ */

html.dark .social-share-sidebar a,
html.dark .social-share-sidebar button,
html.dark #share-facebook-mobile,
html.dark #share-twitter-mobile,
html.dark #share-linkedin-mobile,
html.dark #share-copy-mobile {
    background-color: var(--social-bg);
    color: var(--social-text);
}

html.dark .social-share-sidebar a:hover,
html.dark .social-share-sidebar button:hover,
html.dark #share-facebook-mobile:hover,
html.dark #share-twitter-mobile:hover,
html.dark #share-linkedin-mobile:hover,
html.dark #share-copy-mobile:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

html.dark #share-facebook:hover,
html.dark #share-facebook-mobile:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

html.dark #share-twitter:hover,
html.dark #share-twitter-mobile:hover {
    background-color: #1f2937 !important;
    color: #ffffff !important;
}

html.dark #share-linkedin:hover,
html.dark #share-linkedin-mobile:hover {
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
}

html.dark #share-copy:hover,
html.dark #share-copy-mobile:hover {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

/* ============================================
   SCROLL BUTTONS
   ============================================ */

html.dark #scroll-to-top,
html.dark #scroll-to-bottom {
    background-color: var(--scroll-btn-bg);
    border-color: var(--scroll-btn-border);
    color: var(--scroll-btn-text);
}

html.dark #scroll-to-top:hover,
html.dark #scroll-to-bottom:hover {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
    transform: scale(1.1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

/* ============================================
   PAGINATION
   ============================================ */

/* Base pagination button in dark mode */
html.dark .pagination-btn {
    color: var(--text-tertiary) !important;
    background-color: transparent;
}

/* Inactive pagination button hover */
html.dark .pagination-btn:hover:not(:disabled):not(.bg-primary-600) {
    background-color: var(--bg-tertiary) !important;
    color: #10b981 !important;
}

/* Active pagination button (current page) */
html.dark .pagination-btn.bg-primary-600 {
    background-color: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3);
}

/* Disabled pagination button */
html.dark .pagination-btn:disabled,
html.dark .pagination-btn.opacity-50 {
    color: var(--text-muted) !important;
    opacity: 0.5;
}

/* Ellipsis dots */
html.dark #blogs-pagination span {
    color: var(--text-muted);
}

/* Override Tailwind hover classes */
html.dark .pagination-btn.hover\:bg-gray-100:hover {
    background-color: var(--bg-tertiary) !important;
}

/* ============================================
   ERROR STATE
   ============================================ */

html.dark #post-error .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.2);
}

/* ============================================
   READING PROGRESS BAR
   ============================================ */

html.dark #reading-progress {
    background: linear-gradient(90deg, #10b981, #34d399);
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-tertiary);
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background-color: rgba(16, 185, 129, 0.15);
    color: #10b981;
    transform: scale(1.1);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
}

.theme-toggle:hover svg {
    transform: rotate(15deg);
}

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

.theme-toggle .sun-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

html.dark .theme-toggle .sun-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

html.dark .theme-toggle .moon-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

.theme-toggle::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.4s ease-out;
}

.theme-toggle:active::after {
    transform: scale(2);
}

/* ============================================
   SMOOTH TRANSITIONS
   ============================================ */

html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}