/**
 * Blog Over Theme - Color Variables
 * 
 * Professional color system using industry-standard Tailwind CSS palette.
 * Light mode is the default, dark mode overrides are defined below.
 * 
 * Color Palette Reference:
 * - Gray palette for text hierarchy
 * - Blue palette for links and accents
 * - Follows WCAG accessibility guidelines
 * 
 * @package Blog_Over
 */

/* =========================================
   ROOT VARIABLES (Light Mode - Default)
   ========================================= */
:root {
    /* ===== Brand Colors ===== */
    --blog-over-primary: #3b82f6;
    /* Blue 500 - Primary accent */
    --blog-over-primary-hover: #2563eb;
    /* Blue 600 - Primary hover */
    --blog-over-primary-light: #60a5fa;
    /* Blue 400 - Light variant */
    --blog-over-secondary: #1e40af;
    /* Blue 800 - Secondary */
    --blog-over-secondary-hover: #1d4ed8;
    /* Blue 700 - Secondary hover */
    --blog-over-accent: #8b5cf6;
    /* Violet 500 - Accent color */

    /* ===== Background Colors ===== */
    --blog-over-bg-body: #f9fafb;
    /* Gray 50 - Page background */
    --blog-over-bg-card: #ffffff;
    /* White - Card backgrounds */
    --blog-over-bg-widget: #ffffff;
    /* White - Widget backgrounds */
    --blog-over-bg-header: #1f2937;
    /* Gray 800 - Header background */
    --blog-over-bg-topbar: #111827;
    /* Gray 900 - Topbar background */
    --blog-over-bg-footer: #1f2937;
    /* Gray 800 - Footer background */
    --blog-over-bg-input: #f3f4f6;
    /* Gray 100 - Input backgrounds */
    --blog-over-bg-input-focus: #e5e7eb;
    /* Gray 200 - Input focus */
    --blog-over-bg-overlay: rgba(0, 0, 0, 0.5);
    --blog-over-bg-code: #f3f4f6;
    /* Gray 100 - Code blocks */

    /* ===== Text Colors - Professional Gray Hierarchy ===== */
    --blog-over-text-body: #374151;
    /* Gray 700 - Main body text */
    --blog-over-text-primary: #111827;
    /* Gray 900 - Headings & emphasis */
    --blog-over-text-secondary: #4b5563;
    /* Gray 600 - Subtitles, widget text */
    --blog-over-text-muted: #9ca3af;
    /* Gray 400 - Captions, dates, placeholders */
    --blog-over-text-inverse: #f9fafb;
    /* Gray 50 - Text on dark backgrounds */

    /* ===== Link Colors ===== */
    --blog-over-text-link: var(--blog-over-primary);
    /* Linked */
    --blog-over-text-link-hover: var(--blog-over-secondary);
    /* Linked */
    --blog-over-text-link-visited: #4f46e5;
    /* Indigo 600 - Visited links (optional) */

    /* ===== Heading Colors ===== */
    --blog-over-heading-color: #111827;
    /* Gray 900 - All headings */
    --blog-over-heading-inverse: #f9fafb;
    /* Gray 50 - Headings on dark bg */

    /* ===== Border Colors ===== */
    --blog-over-border-color: #e5e7eb;
    /* Gray 200 - Default borders */
    --blog-over-border-light: #f3f4f6;
    /* Gray 100 - Light borders */
    --blog-over-border-dark: #d1d5db;
    /* Gray 300 - Darker borders */
    --blog-over-border-focus: var(--blog-over-primary);
    /* Linked */

    /* ===== Shadow Definitions ===== */
    --blog-over-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --blog-over-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --blog-over-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --blog-over-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --blog-over-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.04);
    --blog-over-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.2);

    /* ===== Gradient Backgrounds ===== */
    --blog-over-gradient-primary: linear-gradient(135deg, var(--blog-over-primary), var(--blog-over-primary-hover));
    --blog-over-gradient-secondary: linear-gradient(135deg, var(--blog-over-secondary), var(--blog-over-secondary-hover));
    --blog-over-gradient-dark: linear-gradient(135deg, #1f2937, #111827);
    --blog-over-gradient-light: linear-gradient(135deg, #f9fafb, #e5e7eb);

    /* ===== Error/Alert Colors ===== */
    --blog-over-error: #ef4444;
    /* Red 500 - Error color */
    --blog-over-error-bg: #fef2f2;
    /* Red 50 - Error background */
    --blog-over-error-dark: #dc2626;
    /* Red 600 - Error hover */

    /* ===== Alias Variables (for backward compatibility) ===== */
    --blog-over-link-color: var(--blog-over-primary);
    /* Alias for primary link color */
    --blog-over-card-bg: var(--blog-over-bg-card);
    /* Alias for card background */

    /* ===== Category Badge Colors ===== */
    --blog-over-badge-bg: var(--blog-over-primary);
    /* Linked */
    --blog-over-badge-text: #ffffff;
    --blog-over-badge-hover-bg: var(--blog-over-secondary);
    /* Linked */

    /* ===== Button Colors ===== */
    --blog-over-btn-primary-bg: var(--blog-over-primary);
    /* Linked */
    --blog-over-btn-primary-text: #ffffff;
    --blog-over-btn-primary-hover-bg: var(--blog-over-secondary);
    /* Linked */
    --blog-over-btn-secondary-bg: #4b5563;
    /* Gray 600 */
    --blog-over-btn-secondary-text: #ffffff;

    /* ===== Widget Colors ===== */
    --blog-over-widget-bg: #ffffff;
    --blog-over-widget-title-bg: transparent;
    --blog-over-widget-title-color: #111827;
    /* Gray 900 */
    --blog-over-widget-border: #e5e7eb;
    /* Gray 200 */
    --blog-over-widget-text: #4b5563;
    /* Gray 600 */
    --blog-over-widget-link: #4b5563;
    /* Gray 600 - Widget links */
    --blog-over-widget-link-hover: var(--blog-over-primary);
    /* Linked */

    /* ===== Meta Colors ===== */
    --blog-over-meta-color: #6b7280;
    /* Gray 500 */
    --blog-over-meta-icon: #9ca3af;
    /* Gray 400 */
    --blog-over-meta-link: #6b7280;
    /* Gray 500 */
    --blog-over-meta-link-hover: var(--blog-over-primary);
    /* Linked */

    /* ===== Form Colors ===== */
    --blog-over-input-bg: #ffffff;
    --blog-over-input-border: #d1d5db;
    /* Gray 300 */
    --blog-over-input-text: #374151;
    /* Gray 700 */
    --blog-over-input-placeholder: #9ca3af;
    /* Gray 400 */

    /* ===== Table Colors ===== */
    --blog-over-table-header-bg: #f3f4f6;
    /* Gray 100 */
    --blog-over-table-border: #e5e7eb;
    /* Gray 200 */
    --blog-over-table-stripe: #f9fafb;
    /* Gray 50 */

    /* ===== Blockquote ===== */
    --blog-over-blockquote-bg: #f3f4f6;
    /* Gray 100 */
    --blog-over-blockquote-border: var(--blog-over-primary);
    /* Linked */
    --blog-over-blockquote-text: #4b5563;
    /* Gray 600 */

    /* ===== Breadcrumb ===== */
    --blog-over-breadcrumb-bg: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%);
    --blog-over-breadcrumb-text: #6b7280;
    /* Gray 500 */
    --blog-over-breadcrumb-link: var(--blog-over-primary);
    /* Linked */
    --blog-over-breadcrumb-current: #111827;
    /* Gray 900 */
    --blog-over-breadcrumb-separator: #9ca3af;
    /* Gray 400 */

    /* ===== Page Header ===== */
    --blog-over-page-header-bg: #f3f4f6;
    /* Gray 100 - Light background for light skin */
    --blog-over-page-header-text: #111827;
    /* Gray 900 - Dark text for light skin */
    --blog-over-page-header-link: #3b82f6;
    /* Blue 500 - Link color */
    --blog-over-page-header-link-hover: #1e40af;
    /* Blue 800 - Link hover */

    /* ===== Sidebar ===== */
    --blog-over-sidebar-widget-bg: #ffffff;
    --blog-over-sidebar-title-color: #111827;
    /* Gray 900 */
    --blog-over-sidebar-text: #4b5563;
    /* Gray 600 */
    --blog-over-sidebar-link: #4b5563;
    /* Gray 600 */
    --blog-over-sidebar-link-hover: var(--blog-over-primary);
    /* Linked */

    /* ===== Comments ===== */
    --blog-over-comment-bg: #f9fafb;
    /* Gray 50 */
    --blog-over-comment-border: #e5e7eb;
    /* Gray 200 */
    --blog-over-comment-author: #111827;
    /* Gray 900 */
    --blog-over-comment-text: #374151;
    /* Gray 700 */
    --blog-over-comment-meta: #6b7280;
    /* Gray 500 */

    /* ===== Tags ===== */
    --blog-over-tag-bg: #f3f4f6;
    /* Gray 100 */
    --blog-over-tag-text: #4b5563;
    /* Gray 600 */
    --blog-over-tag-hover-bg: var(--blog-over-primary);
    /* Linked */
    --blog-over-tag-hover-text: #ffffff;

    /* ===== Share Buttons ===== */
    --blog-over-share-bg: #f3f4f6;
    /* Gray 100 */
    --blog-over-share-icon: #6b7280;
    /* Gray 500 */
    --blog-over-share-hover-bg: var(--blog-over-primary);
    /* Linked */
    --blog-over-share-hover-icon: #ffffff;

    /* ===== Author Box ===== */
    --blog-over-author-bg: #ffffff;
    --blog-over-author-border: #e5e7eb;
    /* Gray 200 */
    --blog-over-author-name: #111827;
    /* Gray 900 */
    --blog-over-author-bio: #4b5563;
    /* Gray 600 */
    --blog-over-author-link: var(--blog-over-primary);
    /* Linked */

    /* ===== Related Posts ===== */
    --blog-over-related-bg: #ffffff;
    --blog-over-related-border: #e5e7eb;
    /* Gray 200 */
    --blog-over-related-title: #111827;
    /* Gray 900 */
    --blog-over-related-meta: #6b7280;
    /* Gray 500 */

    /* ===== Post Navigation ===== */
    --blog-over-postnav-bg: #f9fafb;
    /* Gray 50 */
    --blog-over-postnav-border: #e5e7eb;
    /* Gray 200 */
    --blog-over-postnav-label: #6b7280;
    /* Gray 500 */
    --blog-over-postnav-title: #111827;
    /* Gray 900 */
    --blog-over-postnav-hover: var(--blog-over-primary);
    /* Linked */

    /* ===== Scroll to Top ===== */
    --blog-over-scroll-top-bg: var(--blog-over-primary);
    /* Linked */
    --blog-over-scroll-top-icon: #ffffff;

    /* ===== Mobile Menu ===== */
    --blog-over-mobile-menu-bg: #1f2937;
    /* Gray 800 */
    --blog-over-mobile-menu-text: #f9fafb;
    /* Gray 50 */
    --blog-over-mobile-menu-border: #374151;
    /* Gray 700 */
    --blog-over-mobile-menu-link: #e5e7eb;
    /* Gray 200 */
    --blog-over-mobile-menu-link-hover: var(--blog-over-primary-light);
    /* Linked */

    /* ===== Search Modal ===== */
    --blog-over-search-modal-bg: #ffffff;
    --blog-over-search-input-bg: #f3f4f6;
    /* Gray 100 */
    --blog-over-search-btn-bg: var(--blog-over-primary);
    /* Linked */

    /* ===== Navigation Menu ===== */
    --blog-over-nav-text: #f9fafb;
    /* Gray 50 - Menu links on dark header */
    --blog-over-nav-text-hover: var(--blog-over-primary-light);
    /* Linked */
    --blog-over-submenu-bg: #ffffff;
    --blog-over-submenu-text: #374151;
    /* Gray 700 */
    --blog-over-submenu-text-hover: var(--blog-over-primary);
    /* Linked */
    --blog-over-submenu-border: #e5e7eb;
    /* Gray 200 */

    /* ===== Footer ===== */
    --blog-over-footer-bg: #1f2937;
    /* Gray 800 */
    --blog-over-footer-text: #9ca3af;
    /* Gray 400 */
    --blog-over-footer-heading: #f9fafb;
    /* Gray 50 */
    --blog-over-footer-link: #9ca3af;
    /* Gray 400 */
    --blog-over-footer-link-hover: var(--blog-over-primary-light);
    /* Linked */
    --blog-over-footer-border: #374151;
    /* Gray 700 */

    /* ===== Post Cards ===== */
    --blog-over-card-title: #111827;
    /* Gray 900 */
    --blog-over-card-title-hover: var(--blog-over-primary);
    /* Linked */
    --blog-over-card-excerpt: #4b5563;
    /* Gray 600 */
    --blog-over-card-meta: #6b7280;
    /* Gray 500 */

    /* ===== Entry Content ===== */
    --blog-over-content-text: #374151;
    /* Gray 700 */
    --blog-over-content-heading: #111827;
    /* Gray 900 */
    --blog-over-content-link: var(--blog-over-primary);
    /* Linked */
    --blog-over-content-link-hover: var(--blog-over-secondary);
    /* Linked */

    /* ===== Spacing Scale ===== */
    --blog-over-space-0: 0;
    --blog-over-space-1: 0.25rem;
    /* 4px */
    --blog-over-space-2: 0.5rem;
    /* 8px */
    --blog-over-space-3: 0.75rem;
    /* 12px */
    --blog-over-space-4: 1rem;
    /* 16px */
    --blog-over-space-5: 1.25rem;
    /* 20px */
    --blog-over-space-6: 1.5rem;
    /* 24px */
    --blog-over-space-7: 1.75rem;
    /* 28px */
    --blog-over-space-8: 2rem;
    /* 32px */
    --blog-over-space-10: 2.5rem;
    /* 40px */
    --blog-over-space-12: 3rem;
    /* 48px */
    --blog-over-space-16: 4rem;
    /* 64px */

    /* ===== Typography Scale ===== */
    --blog-over-font-xs: 0.75rem;
    /* 12px */
    --blog-over-font-sm: 0.8125rem;
    /* 13px */
    --blog-over-font-base: 0.875rem;
    /* 14px */
    --blog-over-font-md: 0.9375rem;
    /* 15px */
    --blog-over-font-lg: 1rem;
    /* 16px */
    --blog-over-font-xl: 1.125rem;
    /* 18px */
    --blog-over-font-2xl: 1.25rem;
    /* 20px */
    --blog-over-font-3xl: 1.5rem;
    /* 24px */
    --blog-over-font-4xl: 1.875rem;
    /* 30px */
    --blog-over-font-5xl: 2.25rem;
    /* 36px */

    /* ===== Line Height Scale ===== */
    --blog-over-leading-tight: 1.25;
    --blog-over-leading-snug: 1.375;
    --blog-over-leading-normal: 1.5;
    --blog-over-leading-relaxed: 1.625;
    --blog-over-leading-loose: 2;

    /* ===== Transition Utilities ===== */
    --blog-over-transition-base: all 0.3s ease;
    --blog-over-transition-fast: all 0.2s ease;
    --blog-over-transition-slow: all 0.4s ease;
    --blog-over-transition-color: color 0.2s ease;
    --blog-over-transition-transform: transform 0.2s ease;
    --blog-over-transition-opacity: opacity 0.3s ease;
}

/* =========================================
   DARK MODE VARIABLE OVERRIDES
   Applied when body has .blog-over-dark-mode class
   ========================================= */
body.blog-over-dark-mode {
    /* ===== Background Colors ===== */
    --blog-over-bg-body: #111827;
    /* Gray 900 */
    --blog-over-bg-card: #1f2937;
    /* Gray 800 */
    --blog-over-bg-widget: #1f2937;
    /* Gray 800 */
    --blog-over-bg-header: #0f172a;
    /* Slate 900 */
    --blog-over-bg-topbar: #030712;
    /* Gray 950 */
    --blog-over-bg-footer: #0f172a;
    /* Slate 900 */
    --blog-over-bg-input: #1f2937;
    /* Gray 800 */
    --blog-over-bg-input-focus: #374151;
    /* Gray 700 */
    --blog-over-bg-overlay: rgba(0, 0, 0, 0.75);
    --blog-over-bg-code: #1f2937;
    /* Gray 800 */

    /* ===== Text Colors - Dark Mode Hierarchy ===== */
    --blog-over-text-body: #d1d5db;
    /* Gray 300 - Main body text */
    --blog-over-text-primary: #f9fafb;
    /* Gray 50 - Headings & emphasis */
    --blog-over-text-secondary: #9ca3af;
    /* Gray 400 - Subtitles */
    --blog-over-text-muted: #6b7280;
    /* Gray 500 - Captions, dates */
    --blog-over-text-inverse: #111827;
    /* Gray 900 - Text on light backgrounds */

    /* ===== Link Colors - Dark Mode ===== */
    --blog-over-text-link: #60a5fa;
    /* Blue 400 - Links */
    --blog-over-text-link-hover: #93c5fd;
    /* Blue 300 - Link hover */

    /* ===== Heading Colors ===== */
    --blog-over-heading-color: #f9fafb;
    /* Gray 50 */
    --blog-over-heading-inverse: #111827;
    /* Gray 900 */

    /* ===== Border Colors ===== */
    --blog-over-border-color: #374151;
    /* Gray 700 */
    --blog-over-border-light: #1f2937;
    /* Gray 800 */
    --blog-over-border-dark: #4b5563;
    /* Gray 600 */
    --blog-over-border-focus: #60a5fa;
    /* Blue 400 */

    /* ===== Shadow Definitions - Darker for dark mode ===== */
    --blog-over-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --blog-over-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --blog-over-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --blog-over-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    --blog-over-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.25);
    --blog-over-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.3);

    /* ===== Gradient Backgrounds ===== */
    --blog-over-gradient-primary: linear-gradient(135deg, #2563eb, #1d4ed8);
    --blog-over-gradient-secondary: linear-gradient(135deg, #1e40af, #1e3a8a);
    --blog-over-gradient-dark: linear-gradient(135deg, #111827, #030712);
    --blog-over-gradient-light: linear-gradient(135deg, #1f2937, #374151);

    /* ===== Error/Alert Colors (Dark Mode) ===== */
    --blog-over-error: #f87171;
    /* Red 400 */
    --blog-over-error-bg: #450a0a;
    /* Red 950 */
    --blog-over-error-dark: #ef4444;
    /* Red 500 */

    /* ===== Alias Variables (Dark Mode) ===== */
    --blog-over-link-color: var(--blog-over-primary-light);
    /* Lighter blue for dark mode links */
    --blog-over-card-bg: var(--blog-over-bg-card);
    /* Alias for card background */

    /* ===== Category Badge Colors ===== */
    --blog-over-badge-bg: #2563eb;
    /* Blue 600 */
    --blog-over-badge-hover-bg: #3b82f6;
    /* Blue 500 */

    /* ===== Button Colors ===== */
    --blog-over-btn-primary-bg: #2563eb;
    /* Blue 600 */
    --blog-over-btn-primary-hover-bg: #3b82f6;
    /* Blue 500 */

    /* ===== Widget Colors ===== */
    --blog-over-widget-bg: #1f2937;
    /* Gray 800 */
    --blog-over-widget-title-color: #f9fafb;
    /* Gray 50 */
    --blog-over-widget-border: #374151;
    /* Gray 700 */
    --blog-over-widget-text: #9ca3af;
    /* Gray 400 */
    --blog-over-widget-link: #9ca3af;
    /* Gray 400 */
    --blog-over-widget-link-hover: #60a5fa;
    /* Blue 400 */

    /* ===== Meta Colors ===== */
    --blog-over-meta-color: #9ca3af;
    /* Gray 400 */
    --blog-over-meta-icon: #6b7280;
    /* Gray 500 */
    --blog-over-meta-link: #9ca3af;
    /* Gray 400 */
    --blog-over-meta-link-hover: #60a5fa;
    /* Blue 400 */

    /* ===== Form Colors ===== */
    --blog-over-input-bg: #1f2937;
    /* Gray 800 */
    --blog-over-input-border: #374151;
    /* Gray 700 */
    --blog-over-input-text: #f9fafb;
    /* Gray 50 */
    --blog-over-input-placeholder: #6b7280;
    /* Gray 500 */

    /* ===== Table Colors ===== */
    --blog-over-table-header-bg: #1f2937;
    /* Gray 800 */
    --blog-over-table-border: #374151;
    /* Gray 700 */
    --blog-over-table-stripe: #111827;
    /* Gray 900 */

    /* ===== Blockquote ===== */
    --blog-over-blockquote-bg: #1f2937;
    /* Gray 800 */
    --blog-over-blockquote-border: #60a5fa;
    /* Blue 400 */
    --blog-over-blockquote-text: #9ca3af;
    /* Gray 400 */

    /* ===== Breadcrumb ===== */
    --blog-over-breadcrumb-bg: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    --blog-over-breadcrumb-text: #9ca3af;
    /* Gray 400 */
    --blog-over-breadcrumb-link: #60a5fa;
    /* Blue 400 */
    --blog-over-breadcrumb-current: #f9fafb;
    /* Gray 50 */
    --blog-over-breadcrumb-separator: #6b7280;
    /* Gray 500 */

    /* ===== Page Header ===== */
    --blog-over-page-header-bg: #0f172a;
    /* Slate 900 - Dark background for dark skin */
    --blog-over-page-header-text: #f9fafb;
    /* Gray 50 - Light text for dark skin */
    --blog-over-page-header-link: #60a5fa;
    /* Blue 400 - Link color in dark mode */
    --blog-over-page-header-link-hover: #93c5fd;
    /* Blue 300 - Link hover in dark mode */

    /* ===== Sidebar ===== */
    --blog-over-sidebar-widget-bg: #1f2937;
    /* Gray 800 */
    --blog-over-sidebar-title-color: #f9fafb;
    /* Gray 50 */
    --blog-over-sidebar-text: #9ca3af;
    /* Gray 400 */
    --blog-over-sidebar-link: #9ca3af;
    /* Gray 400 */
    --blog-over-sidebar-link-hover: #60a5fa;
    /* Blue 400 */

    /* ===== Comments ===== */
    --blog-over-comment-bg: #1f2937;
    /* Gray 800 */
    --blog-over-comment-border: #374151;
    /* Gray 700 */
    --blog-over-comment-author: #f9fafb;
    /* Gray 50 */
    --blog-over-comment-text: #d1d5db;
    /* Gray 300 */
    --blog-over-comment-meta: #9ca3af;
    /* Gray 400 */

    /* ===== Tags ===== */
    --blog-over-tag-bg: #374151;
    /* Gray 700 */
    --blog-over-tag-text: #9ca3af;
    /* Gray 400 */
    --blog-over-tag-hover-bg: #60a5fa;
    /* Blue 400 */
    --blog-over-tag-hover-text: #111827;
    /* Gray 900 */

    /* ===== Share Buttons ===== */
    --blog-over-share-bg: #374151;
    /* Gray 700 */
    --blog-over-share-icon: #9ca3af;
    /* Gray 400 */
    --blog-over-share-hover-bg: #60a5fa;
    /* Blue 400 */
    --blog-over-share-hover-icon: #111827;
    /* Gray 900 */

    /* ===== Author Box ===== */
    --blog-over-author-bg: #1f2937;
    /* Gray 800 */
    --blog-over-author-border: #374151;
    /* Gray 700 */
    --blog-over-author-name: #f9fafb;
    /* Gray 50 */
    --blog-over-author-bio: #9ca3af;
    /* Gray 400 */
    --blog-over-author-link: #60a5fa;
    /* Blue 400 */

    /* ===== Related Posts ===== */
    --blog-over-related-bg: #1f2937;
    /* Gray 800 */
    --blog-over-related-border: #374151;
    /* Gray 700 */
    --blog-over-related-title: #f9fafb;
    /* Gray 50 */
    --blog-over-related-meta: #9ca3af;
    /* Gray 400 */

    /* ===== Post Navigation ===== */
    --blog-over-postnav-bg: #1f2937;
    /* Gray 800 */
    --blog-over-postnav-border: #374151;
    /* Gray 700 */
    --blog-over-postnav-label: #9ca3af;
    /* Gray 400 */
    --blog-over-postnav-title: #f9fafb;
    /* Gray 50 */
    --blog-over-postnav-hover: #60a5fa;
    /* Blue 400 */

    /* ===== Mobile Menu ===== */
    --blog-over-mobile-menu-link: #d1d5db;
    /* Gray 300 */
    --blog-over-mobile-menu-link-hover: #60a5fa;
    /* Blue 400 */

    /* ===== Search Modal ===== */
    --blog-over-search-modal-bg: #1f2937;
    /* Gray 800 */
    --blog-over-search-input-bg: #111827;
    /* Gray 900 */

    /* ===== Navigation Menu ===== */
    --blog-over-nav-text: #f9fafb;
    /* Gray 50 */
    --blog-over-nav-text-hover: #60a5fa;
    /* Blue 400 */
    --blog-over-submenu-bg: #1f2937;
    /* Gray 800 */
    --blog-over-submenu-text: #d1d5db;
    /* Gray 300 */
    --blog-over-submenu-text-hover: #60a5fa;
    /* Blue 400 */
    --blog-over-submenu-border: #374151;
    /* Gray 700 */

    /* ===== Footer ===== */
    --blog-over-footer-bg: #0f172a;
    /* Slate 900 */
    --blog-over-footer-text: #9ca3af;
    /* Gray 400 */
    --blog-over-footer-heading: #f9fafb;
    /* Gray 50 */
    --blog-over-footer-link: #9ca3af;
    /* Gray 400 */
    --blog-over-footer-link-hover: #60a5fa;
    /* Blue 400 */
    --blog-over-footer-border: #1f2937;
    /* Gray 800 */

    /* ===== Post Cards ===== */
    --blog-over-card-title: #f9fafb;
    /* Gray 50 */
    --blog-over-card-title-hover: #60a5fa;
    /* Blue 400 */
    --blog-over-card-excerpt: #9ca3af;
    /* Gray 400 */
    --blog-over-card-meta: #6b7280;
    /* Gray 500 */

    /* ===== Entry Content ===== */
    --blog-over-content-text: #d1d5db;
    /* Gray 300 */
    --blog-over-content-heading: #f9fafb;
    /* Gray 50 */
    --blog-over-content-link: #60a5fa;
    /* Blue 400 */
    --blog-over-content-link-hover: #93c5fd;
    /* Blue 300 */
}