/* * CSS Custom Properties — Non-color variables * Colors are injected by PHP (Ag_Colors class) via wp_head. * * These variables define: typography, spacing, shadows, borders, transitions. */ :root { /* ========== TYPOGRAPHY ========== */ --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif; --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-arabic: 'Scheherazade New', 'Amiri', serif; /* ========== SPACING ========== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 80px; --space-10: 120px; /* ========== SHADOWS ========== */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04); /* ========== BORDER RADIUS ========== */ --radius: 6px; --radius-sm: 3px; --radius-lg: 12px; --radius-xl: 24px; --radius-full: 9999px; /* ========== TRANSITIONS ========== */ --transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-fast: 0.15s ease; --transition-slow: 0.5s ease; /* ========== LAYOUT ========== */ --max-width: 1200px; --max-width-content: 700px; --max-width-article: 780px; /* ========== Z-INDEX LAYERS ========== */ --z-header: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; } /* ========== DARK MODE — color overrides ========== */ /* * Color variables are normally injected by PHP (Ag_Colors) on :root. * Here we override them when [data-theme="dark"] is set on . * The attribute is toggled by JS (main.js) and saved in localStorage. * A prefers-color-scheme fallback is also applied via JS if no * explicit choice has been saved. */ [data-theme="dark"] { --bg: #1a1a2e; --bg-card: #16213e; --burgundy: #c9606b; --burgundy-dark: #a8404d; --burgundy-light: #d4737d; --text: #e8e6e3; --text-light: #a8a5a0; --text-muted: #6e6b66; --border: #2e2e4a; --border-light: #252540; --accent-warm: #d4a574; --accent-gold: #c9a96e; } /* ========== DARK MODE — component-level overrides ========== */ /* Sticky header — overrides the hardcoded rgba background */ [data-theme="dark"] .site-header { background: rgba(26, 26, 46, 0.96); border-bottom-color: var(--border); } /* Mobile menu overlay */ [data-theme="dark"] .mobile-menu-overlay { background: rgba(22, 33, 62, 0.98); } /* Search input border line */ [data-theme="dark"] .search-input { color: var(--text); } /* Article blockquote */ [data-theme="dark"] .article-content blockquote { background: rgba(200, 96, 107, 0.06); } /* Arabic block gradient */ [data-theme="dark"] .arabic-block { background: linear-gradient(135deg, rgba(200, 96, 107, 0.06) 0%, rgba(201, 169, 110, 0.06) 100%); } /* SVG thumbnail cards — recolor for dark mode */ [data-theme="dark"] .card-thumbnail svg > rect:first-child { fill: #1e2a45; } [data-theme="dark"] .card-thumbnail svg text[fill="#5C1A24"] { fill: #e8e6e3; } [data-theme="dark"] .card-thumbnail svg text[fill="#722F37"] { fill: #c9606b; } [data-theme="dark"] .card-thumbnail svg line[stroke="#722F37"], [data-theme="dark"] .card-thumbnail svg path[stroke="#722F37"] { stroke: #c9606b; } [data-theme="dark"] .card-thumbnail svg line[stroke="#C9A96E"], [data-theme="dark"] .card-thumbnail svg path[stroke="#C9A96E"] { stroke: #d4b478; } [data-theme="dark"] .card-thumbnail svg circle[fill="#722F37"], [data-theme="dark"] .card-thumbnail svg polygon[fill="#722F37"], [data-theme="dark"] .card-thumbnail svg rect[stroke="#722F37"] { fill: #c9606b; stroke: #c9606b; } [data-theme="dark"] .card-thumbnail svg circle[fill="#C9A96E"] { fill: #d4b478; } [data-theme="dark"] .card-thumbnail svg rect[stroke="#C9A96E"] { stroke: #d4b478; } /* Dark mode toggle button */ .ag-theme-toggle { background: none; border: none; cursor: pointer; padding: 8px; color: var(--text-light); transition: color var(--transition); display: none; align-items: center; justify-content: center; flex-shrink: 0; } /* Show desktop toggle only on tablet+ */ @media (min-width: 601px) { .search-wrapper > .ag-theme-toggle { display: flex; } } .ag-theme-toggle:hover { color: var(--burgundy); } .ag-theme-toggle svg { width: 20px; height: 20px; display: block; } /* Show/hide icons based on active theme */ .ag-theme-toggle .icon-moon { display: block; } .ag-theme-toggle .icon-sun { display: none; } [data-theme="dark"] .ag-theme-toggle .icon-moon { display: none; } [data-theme="dark"] .ag-theme-toggle .icon-sun { display: block; } /* Mobile overlay toggle — positioned below the close button */ .mobile-theme-toggle-wrapper { position: absolute; top: 20px; left: 24px; } .mobile-theme-toggle-wrapper .ag-theme-toggle { display: flex; color: var(--text); } .mobile-theme-toggle-wrapper .ag-theme-toggle:hover { color: var(--burgundy); }