:root,
:root[data-theme="light"] {
    --bg: #f9f9f9;
    --panel: #ffffff;
    --panel-2: #f9f9f9;
    --panel-3: #000000;
    --txt: #363636;
    --txt-2: #ffffff;
    --muted: #ADADAD;
    --accent: #e80028;
    --borders: rgba(0, 0, 0, 0.1);
    --hover: rgba(0, 0, 0, 0.07);
    --radius: 8px;
    --btn-primary: #e80028;
    --btn-secondary: #131313;
}

:root[data-theme="dark"] {
    --bg: #050505;
    --panel: #131313;
    --panel-2: #0f0f10;
    --panel-3: #f9f9f9;
    --txt: #ffffff;
    --txt-2: #000000;
    --muted: #ADADAD;
    --accent: #e80028;
    --borders: rgba(255, 255, 255, 0.05);
    --hover: rgba(255, 255, 255, 0.07);
    --radius: 8px;
    --btn-primary: #e80028;
    --btn-secondary: #f9f9f9;
}

/* Transición en variables solo */
:root {
    transition: 
        --bg 0.35s ease,
        --panel 0.35s ease,
        --panel-2 0.35s ease,
        --panel-3 0.35s ease,
        --txt 0.35s ease,
        --txt-2 0.35s ease,
        --muted 0.35s ease,
        --accent 0.35s ease,
        --accent-2 0.35s ease,
        --borders 0.35s ease;
}

html { transition: none; }
html[data-theme] { 
    transition: 
        --bg 0.35s ease,
        --panel 0.35s ease,
        --panel-2 0.35s ease,
        --panel-3 0.35s ease,
        --txt 0.35s ease,
        --txt-2 0.35s ease,
        --muted 0.35s ease,
        --accent 0.35s ease,
        --accent-2 0.35s ease,
        --borders 0.35s ease;
}

body {
    background-color: var(--bg);
    color: var(--txt);
    transition: color 0.35s ease, background-color 0.35s ease;
}

header,
main,
footer,
section,
article,
div,
button,
input{
    transition: color 0.35s ease, background-color 0.35s ease;
}