/* Dark Override — Eddie Learns AI Theme
   Loaded after Source's built/screen.css
   Uses :root and html selectors (no class dependency) for instant rendering */

/* ---------- 1. Root Variables ---------- */
:root {
    --color-white: #e5e5e5;
    --color-lighter-gray: rgb(255 255 255 / 0.06);
    --color-light-gray: #2a2a2a;
    --color-mid-gray: #3a3a3a;
    --color-dark-gray: #a3a3a3;
    --color-darker-gray: #fafafa;
    --color-black: #0d0d0d;
    --color-primary-text: #e5e5e5;
    --color-secondary-text: rgb(255 255 255 / 0.55);
    --color-border: rgb(255 255 255 / 0.1);
    --color-dark-border: rgb(255 255 255 / 0.35);
}

/* ---------- 2. Body ---------- */
html body { background-color: var(--background-color); color: var(--color-primary-text); }

/* ---------- 3. Headings ---------- */
html h1, html h2, html h3, html h4, html h5, html h6 {
    color: var(--color-darker-gray);
    letter-spacing: -0.02em;
}

/* ---------- 4. Links ---------- */
html a { color: var(--color-darker-gray); }
html a:hover { color: var(--ghost-accent-color); opacity: 1; }

/* ---------- 5. Navigation ---------- */
html .gh-navigation { background-color: #151515; border-bottom: 1px solid var(--color-border); }
html .gh-navigation a { color: var(--color-darker-gray); }
html .gh-navigation a:hover { color: var(--ghost-accent-color); opacity: 1; }
html .gh-navigation-logo { font-weight: 725; letter-spacing: -0.02em; }
html .gh-navigation-members .gh-button { background-color: var(--ghost-accent-color); color: #0d0d0d; font-weight: 650; }

/* ---------- 6. Post Cards ---------- */
html .gh-card-link:hover { opacity: 1; }
html .gh-card-tag { color: var(--ghost-accent-color); font-weight: 600; letter-spacing: 0.02em; }
html .gh-card-title { color: var(--color-darker-gray); font-weight: 700; letter-spacing: -0.02em; }
html .gh-card-link:hover .gh-card-title { color: var(--ghost-accent-color); }
html .gh-card-excerpt { color: var(--color-primary-text); }
html .gh-card-meta { color: var(--color-secondary-text); }

/* ---------- 7. Article Page ---------- */
html .gh-article-tag { color: var(--ghost-accent-color); font-weight: 600; }
html .gh-article-title { color: var(--color-darker-gray); font-weight: 750; }
html .gh-article-excerpt { color: var(--color-primary-text); }
html .gh-article-meta { color: var(--color-secondary-text); }
html .gh-article-author-name { color: var(--color-darker-gray); }

/* ---------- 8. Content Body ---------- */
html .gh-content { color: var(--color-primary-text); }
html .gh-content a { color: var(--ghost-accent-color); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
html .gh-content a:hover { opacity: 0.85; }
html .gh-content blockquote { border-left-color: var(--ghost-accent-color); color: var(--color-primary-text); }
html .gh-content pre { background-color: #151515; border: 1px solid var(--color-border); color: var(--color-primary-text); }
html .gh-content :not(pre) > code { background-color: rgb(45 212 191 / 0.12); color: var(--ghost-accent-color); font-size: 0.85em; padding: 0.15em 0.4em; border-radius: 3px; }
html .gh-content hr { background-color: var(--color-border); }
html .gh-content table { background-color: #151515; border-color: var(--color-border); }
html .gh-content th { background-color: #1a1a1a; color: var(--color-darker-gray); }
html .gh-content td { border-color: var(--color-border); }
html .gh-content .kg-card { background-color: #1a1a1a; border-color: var(--color-border); }
html .gh-content .kg-header-card h2, html .gh-content .kg-header-card h3 { color: var(--color-darker-gray); }
html .gh-content .kg-file-card-caption { color: var(--color-secondary-text); }

/* ---------- 9. Pagination ---------- */
html .gh-pagination { border-top: 1px solid var(--color-border); }
html .gh-pagination a { color: var(--color-darker-gray); }
html .gh-pagination a:hover { color: var(--ghost-accent-color); }

/* ---------- 10. Subscribe Form ---------- */
html .gh-form { background-color: #1a1a1a; border: 1px solid var(--color-border); }
html .gh-form-input { color: var(--color-primary-text); background-color: transparent; }
html .gh-form-input::placeholder { color: var(--color-secondary-text); }
html .gh-form .gh-button { background-color: var(--ghost-accent-color); color: #0d0d0d; }

/* ---------- 11. Buttons ---------- */
html .gh-button { background-color: var(--ghost-accent-color); color: #0d0d0d; font-weight: 650; }
html .gh-button:hover { opacity: 0.9; }

/* ---------- 12. Footer ---------- */
html .gh-footer { background-color: #151515; border-top: 1px solid var(--color-border); }
html .gh-footer a { color: var(--color-darker-gray); }
html .gh-footer a:hover { color: var(--ghost-accent-color); opacity: 1; }
html .gh-footer-logo { font-weight: 725; letter-spacing: -0.02em; }
html .gh-footer-bar { border-block-color: var(--color-border); }
html .gh-footer-signup { border-top: 1px solid var(--color-border); }
html .gh-footer-signup-header { color: var(--color-darker-gray); }
html .gh-footer-signup-subhead { color: var(--color-secondary-text); }
html .gh-social-links a svg { color: var(--color-secondary-text); }
html .gh-social-links a:hover svg { color: var(--ghost-accent-color); }

/* ---------- 13. Utilities ---------- */
html ::selection { background-color: rgb(45 212 191 / 0.3); color: var(--color-darker-gray); }
html :focus-visible { outline: 2px solid var(--ghost-accent-color); outline-offset: 2px; }
html ::-webkit-scrollbar { width: 8px; }
html ::-webkit-scrollbar-track { background: #0d0d0d; }
html ::-webkit-scrollbar-thumb { background: #2a2a2a; }
html ::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }
html img { background-color: #1a1a1a; }
html figcaption { color: var(--color-secondary-text); }
html .gh-comments { border-top: 1px solid var(--color-border); }
html .gh-search svg { color: var(--color-darker-gray); }