/* variables.css */
:root {
    /* Variables de tamaño y espaciado (comunes para todos los temas) */
    --base-font-size: 10px;
    --title-font-size: 14px;
    --title2-font-size: 22px;
    
    /* Colores por defecto (tema light) */
    --front-color: slategray;
    --front-code-color: slategray;
    --front-readonly: #90bcbd;
    --warning-color: #ce7f7f;
    --warning-color-2: #ce7f7f1f;
    --reset-color: #ed8b42;
    --2nd-color: #a9a9a9;
    --bg-color: #f5f5f5;
    --credit-color: #47bce3;
    --credit-2-color: black;
    --code-color: darkgrey;
    --links-color: darkgrey;
    --bg-page-color: #ffffff;
    --watermark-color: rgb(58 170 168 / 10%);
    --bg-code-color: #f3f3f3;
    --references-bg-color: #c4f3be4d;
    --titles-bg-color: #e6fbe3;
    --titles-fg-color: #a4abab;
    --background-color-alt: #bed9e3;
    --title-fg-color-alt: #ffffff;
    --warning-btn-color: #b79632;
    --info-btn-color: #577bf4;
    --danger-btn-color: #e78f98;
    --success-btn-color: #28a745;
    --hover-color: #e0e0e0;
    --selected-2-color: #c2cbe05c;
    --qc-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --qc-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --qc-shadow-hover: 0 8px 12px rgba(0, 0, 0, 0.15);
    --thoughts-bg-color: #fffee7;
    --thoughts-fg-color: #708090;
}

[data-theme="light"] {
    --front-color: slategray;
    --font-color-logo: #292929;
    --selected-color: #fffee7; 
    --selected-border-color: #777f925c;
}

[data-theme="dark"] {
    --front-color: whitesmoke;
    --front-code-color: slategray;
    --bg-color: #18215f;
    --bg-page-color: #000;
    --font-color-logo: whitesmoke;
    --selected-color: #2d4571;
    --titles-bg-color: #5e6370;
    --titles-fg-color: #bfc4c4;
    --background-color-alt: #65a0bd;
    --title-fg-color-alt: #bdc6c6;
    --selected-border-color: #b3b4b8;
}