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

/* Variables del tema oscuro */

body.dark-mode{

    --background:#121212;
    --background-secondary:#1C1C1E;

    --text:#F5F5F7;
    --text-secondary:#B8B8BE;

    --border:#303036;

    --primary:#0A84FF;
    --primary-hover:#409CFF;

    --shadow-small:0 1px 2px rgba(0,0,0,.3), 0 3px 10px rgba(0,0,0,.25);
    --shadow-medium:0 2px 6px rgba(0,0,0,.35), 0 14px 28px rgba(0,0,0,.35);
    --shadow-large:0 6px 14px rgba(0,0,0,.4), 0 26px 48px rgba(0,0,0,.5);
    --shadow-accent:0 6px 14px rgba(10,132,255,.16), 0 26px 48px rgba(10,132,255,.28);

    --surface:#1F1F22;
    --surface-secondary:#18181B;

}

/* Fondo */

body.dark-mode{

    background:var(--background);
    color:var(--text);

    transition:.35s ease;

}

/* Tarjetas */

body.dark-mode .category-card,
body.dark-mode .why-card,
body.dark-mode .article-card,
body.dark-mode .search-box{

    background:#1F1F22;

    border:1px solid var(--border);

}

/* Footer */

body.dark-mode footer{

    background:#18181B;

}

/* Links */

body.dark-mode a{

    color:var(--text);

}

/* Inputs */

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select{

    background:#2A2A2D;

    color:white;

}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder{

    color:#A1A1AA;

}

body.dark-mode .hero{

    background:

    linear-gradient(

        180deg,

        #121212 0%,

        #17181B 60%,

        #1F1F22 100%

    );

}
body.dark-mode header{

    background:rgba(18,18,18,.82);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

}

body.dark-mode .search-box:focus-within{

    border-color:var(--primary);

    box-shadow:var(--shadow-medium), 0 0 0 4px rgba(10,132,255,.18);

}