/* =========================================================
   GoldPriceBD - dark-mode.css
   Version: 2.0

   Purpose:
   - Global dark mode
   - Blog/article dark mode
   - Typography visibility
   - Cards / tables / forms
   - Header / footer
   - Links and gold accents
   - Prevent dark-mode visual flash
   ========================================================= */


/* =========================================================
   DARK MODE DESIGN TOKENS
   ========================================================= */

html[data-theme="dark"] {

    /* -----------------------------------------------------
       BACKGROUND
       ----------------------------------------------------- */

    --color-bg: #0b0f14;
    --color-bg-soft: #121821;
    --color-bg-card: #151c26;
    --color-bg-elevated: #111821;
    --color-bg-input: #121821;


    /* -----------------------------------------------------
       TEXT
       ----------------------------------------------------- */

    --color-text: #f5f7fa;
    --color-text-secondary: #c4ccd7;
    --color-text-muted: #9aa6b5;
    --color-text-light: #737f8f;
    --color-text-inverse: #10151c;


    /* -----------------------------------------------------
       COMPATIBILITY TEXT VARIABLES
       -----------------------------------------------------
       Some older component CSS uses:
       --text-color
       --text-primary
       --text-secondary
       --text-muted

       Keep these mapped to the dark theme so older and
       newer components automatically work.
       ----------------------------------------------------- */

    --text-color: #f5f7fa;
    --text-primary: #f5f7fa;
    --text-secondary: #c4ccd7;
    --text-muted: #9aa6b5;
    --text-light: #737f8f;
    --text-inverse: #10151c;


    /* -----------------------------------------------------
       BORDER
       ----------------------------------------------------- */

    --color-border: #283241;
    --color-border-light: #202936;
    --color-border-dark: #394656;

    --border-color: #283241;
    --border-color-light: #202936;
    --border-color-dark: #394656;


    /* -----------------------------------------------------
       PRIMARY / GOLD
       ----------------------------------------------------- */

    --color-primary: #e0b83b;
    --color-primary-hover: #f0ca54;
    --color-primary-light: #2c2614;

    --brand-gold: #d4af37;
    --brand-gold-light: #e0c15a;
    --brand-gold-dark: #b89420;


    /* -----------------------------------------------------
       GOLD STATUS
       ----------------------------------------------------- */

    --gold-bg: #2c2614;
    --gold-border: #66551f;
    --gold-text: #e7c85a;


    /* -----------------------------------------------------
       SECONDARY / SILVER
       ----------------------------------------------------- */

    --color-secondary: #aeb7c6;
    --color-secondary-hover: #c7ced9;
    --color-secondary-light: #252a33;

    --silver-bg: #252a33;
    --silver-border: #454d5b;
    --silver-text: #c7ced9;


    /* -----------------------------------------------------
       STATUS COLORS
       ----------------------------------------------------- */

    --color-success: #4ade80;
    --color-success-bg: #10341f;

    --color-warning: #fbbf24;
    --color-warning-bg: #3b2c0a;

    --color-danger: #f87171;
    --color-danger-bg: #3b1515;

    --color-info: #38bdf8;
    --color-info-bg: #082f49;


    /* -----------------------------------------------------
       TABLE
       ----------------------------------------------------- */

    --table-header-bg: #1b222d;
    --table-row-hover: #202832;
    --table-border: #283241;


    /* -----------------------------------------------------
       CARD
       ----------------------------------------------------- */

    --card-background: #151c26;
    --card-border: #283241;
    --card-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);


    /* -----------------------------------------------------
       INPUT
       ----------------------------------------------------- */

    --input-background: #121821;
    --input-border: #394656;


    /* -----------------------------------------------------
       SHADOW
       ----------------------------------------------------- */

    --shadow-xs:
        0 1px 2px rgba(0, 0, 0, 0.24);

    --shadow-sm:
        0 4px 14px rgba(0, 0, 0, 0.25);

    --shadow-md:
        0 10px 28px rgba(0, 0, 0, 0.30);

    --shadow-lg:
        0 18px 42px rgba(0, 0, 0, 0.36);

    --shadow-xl:
        0 25px 55px rgba(0, 0, 0, 0.42);
}


/* =========================================================
   ROOT DARK MODE
   ========================================================= */

html[data-theme="dark"] {
    background: #0b0f14;
    color-scheme: dark;
}


/* =========================================================
   BODY
   ========================================================= */

html[data-theme="dark"] body {
    background: var(--color-bg);
    color: var(--color-text);
}


/* =========================================================
   GLOBAL TYPOGRAPHY
   ---------------------------------------------------------
   This prevents headings from remaining dark on dark
   backgrounds on pages that use normal h1-h6 elements.
   ========================================================= */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: var(--color-text);
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] dt,
html[data-theme="dark"] dd {
    color: var(--color-text-secondary);
}


/* =========================================================
   BLOG POST - HEADER
   ========================================================= */

html[data-theme="dark"] .blog-post-title {
    color: #f5f7fa !important;
}

html[data-theme="dark"] .blog-post-excerpt {
    color: #b8c1cd !important;
}

html[data-theme="dark"] .blog-post-meta,
html[data-theme="dark"] .blog-post-meta span,
html[data-theme="dark"] .blog-post-meta time {
    color: #9aa6b5 !important;
}


/* =========================================================
   BLOG POST - CONTENT
   ========================================================= */

html[data-theme="dark"] .blog-post-content {
    color: #d5dbe3 !important;
}

html[data-theme="dark"] .blog-post-content p {
    color: #d5dbe3;
}

html[data-theme="dark"] .blog-post-content h2,
html[data-theme="dark"] .blog-post-content h3,
html[data-theme="dark"] .blog-post-content h4,
html[data-theme="dark"] .blog-post-content h5,
html[data-theme="dark"] .blog-post-content h6 {
    color: #f1f4f8 !important;
}

html[data-theme="dark"] .blog-post-content strong {
    color: #ffffff !important;
}


/* =========================================================
   BLOG POST - LINKS
   ========================================================= */

html[data-theme="dark"] .blog-post-content a,
html[data-theme="dark"] .blog-post-inline-link a,
html[data-theme="dark"] .blog-post-back {
    color: #e6c65a !important;
}

html[data-theme="dark"] .blog-post-content a:hover,
html[data-theme="dark"] .blog-post-inline-link a:hover,
html[data-theme="dark"] .blog-post-back:hover {
    color: #f5d978 !important;
}


/* =========================================================
   BLOG POST - CATEGORY
   ========================================================= */

html[data-theme="dark"] .blog-post-category {
    color: #f0d36a !important;
    background: rgba(212, 175, 55, 0.16);
    border: 1px solid rgba(212, 175, 55, 0.18);
}

html[data-theme="dark"] .blog-post-category:hover {
    color: #ffe58a !important;
    background: rgba(212, 175, 55, 0.23);
}


/* =========================================================
   BLOG POST - BLOCKQUOTE
   ========================================================= */

html[data-theme="dark"] .blog-post-content blockquote {
    background: rgba(212, 175, 55, 0.09);
    border-left-color: #d4af37;
    color: #dce2e9;
}

html[data-theme="dark"] .blog-post-content blockquote p {
    color: #dce2e9;
}

html[data-theme="dark"] .blog-post-content blockquote cite {
    color: #9aa6b5;
}


/* =========================================================
   BLOG POST - LIST MARKERS
   ========================================================= */

html[data-theme="dark"] .blog-post-content li::marker {
    color: #e0b83b;
}


/* =========================================================
   BLOG POST - IMAGES
   ========================================================= */

html[data-theme="dark"] .blog-post-cover,
html[data-theme="dark"] .blog-post-image img {
    background: #151c26;
}


/* =========================================================
   BLOG POST - IMAGE CAPTION
   ========================================================= */

html[data-theme="dark"] .blog-post-image figcaption {
    color: #8f9bab;
}


/* =========================================================
   BLOG POST - SIDEBAR
   ========================================================= */

html[data-theme="dark"] .blog-post-sidebar-card {
    background: #151c26 !important;
    border-color: #283241 !important;
    color: #dce2e9;
    box-shadow: var(--shadow-sm);
}

html[data-theme="dark"] .blog-post-sidebar-card h2 {
    color: #f1f4f8 !important;
}

html[data-theme="dark"] .blog-post-sidebar-link {
    color: #cbd3de !important;
    border-bottom-color: #283241;
}

html[data-theme="dark"] .blog-post-sidebar-link:hover {
    color: #f0d36a !important;
}


/* =========================================================
   BLOG POST - TAGS
   ========================================================= */

html[data-theme="dark"] .blog-post-tag {
    color: #e8ca63 !important;
    background: rgba(212, 175, 55, 0.13);
    border: 1px solid rgba(212, 175, 55, 0.10);
}

html[data-theme="dark"] .blog-post-tag:hover {
    color: #ffe58a !important;
    background: rgba(212, 175, 55, 0.20);
}


/* =========================================================
   BLOG POST - NAVIGATION
   ========================================================= */

html[data-theme="dark"] .blog-post-navigation {
    border-top-color: #283241;
}

html[data-theme="dark"] .blog-post-back {
    color: #e0b83b !important;
}


/* =========================================================
   BLOG POST - NOT FOUND / ERROR
   ========================================================= */

html[data-theme="dark"] .blog-post-not-found,
html[data-theme="dark"] .blog-post-error {
    background: #151c26 !important;
    border-color: #283241 !important;
}

html[data-theme="dark"] .blog-post-not-found h1,
html[data-theme="dark"] .blog-post-error h1 {
    color: #f5f7fa !important;
}

html[data-theme="dark"] .blog-post-not-found p,
html[data-theme="dark"] .blog-post-error p {
    color: #aeb8c5 !important;
}


/* =========================================================
   HEADER
   ========================================================= */

html[data-theme="dark"] .site-header {
    background: rgba(17, 24, 33, 0.94);
    border-bottom-color: #283241;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

html[data-theme="dark"] .site-nav a {
    color: #cbd3de;
}

html[data-theme="dark"] .site-nav a:hover {
    color: #ffffff;
}

html[data-theme="dark"] .site-nav a.active {
    color: #f0d36a;
    background: rgba(224, 184, 59, 0.12);
}


/* =========================================================
   FOOTER
   ========================================================= */

html[data-theme="dark"] .site-footer {
    background: #080c11;
    border-top-color: #202936;
}

html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .site-footer p,
html[data-theme="dark"] .site-footer li {
    color: #9aa6b5;
}

html[data-theme="dark"] .site-footer h2,
html[data-theme="dark"] .site-footer h3,
html[data-theme="dark"] .site-footer h4 {
    color: #f5f7fa;
}

html[data-theme="dark"] .site-footer a {
    color: #c5ced9;
}

html[data-theme="dark"] .site-footer a:hover {
    color: #e6c65a;
}


/* =========================================================
   CARDS
   ========================================================= */

html[data-theme="dark"] .price-card,
html[data-theme="dark"] .live-price-controls,
html[data-theme="dark"] .gold-price-comparison,
html[data-theme="dark"] .comparison-table-wrapper,
html[data-theme="dark"] .country-price-section {
    box-shadow: var(--shadow-sm);
}


/* =========================================================
   GENERAL CARD ELEMENTS
   ========================================================= */

html[data-theme="dark"] .card,
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .price-card {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}


/* =========================================================
   FORM ELEMENTS
   ========================================================= */

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: var(--color-bg-input);
    color: var(--color-text);
    border-color: var(--color-border-dark);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #737f8f;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: #d4af37;
    outline-color: rgba(212, 175, 55, 0.25);
}


/* =========================================================
   TABLES
   ========================================================= */

html[data-theme="dark"] table {
    color: #dce2e9;
}

html[data-theme="dark"] th {
    background: var(--table-header-bg);
    color: #f1f4f8;
    border-color: var(--table-border);
}

html[data-theme="dark"] td {
    color: #cbd3de;
    border-color: var(--table-border);
}

html[data-theme="dark"] tr:hover td {
    background: var(--table-row-hover);
}


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

html[data-theme="dark"] button {
    color: var(--color-text);
}

html[data-theme="dark"] .btn-primary {
    background: #d4af37;
    color: #11151b;
}

html[data-theme="dark"] .btn-primary:hover {
    background: #e6c65a;
}


/* =========================================================
   SELECTION
   ---------------------------------------------------------
   Gives selected text a dark-theme friendly appearance.
   ========================================================= */

html[data-theme="dark"] ::selection {
    background: rgba(212, 175, 55, 0.35);
    color: #ffffff;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

html[data-theme="dark"] {
    scrollbar-color: #394656 #0b0f14;
}

html[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0b0f14;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #394656;
    border-radius: 10px;
    border: 2px solid #0b0f14;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4a5667;
}


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

html[data-theme="dark"] #theme-toggle {
    color: #f0d36a;
}

html[data-theme="dark"] #theme-toggle:hover {
    color: #ffe58a;
}


/* =========================================================
   PREVENT UNWANTED LIGHT FLASH
   ---------------------------------------------------------
   Keep the page background dark while the browser paints
   the dark theme.
   ========================================================= */

html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: #0b0f14;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html[data-theme="dark"] *,
    html[data-theme="dark"] *::before,
    html[data-theme="dark"] *::after {
        transition: none !important;
        animation: none !important;
    }

}