/* Importación de fuentes */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

:root {
    /* Colores */
    --clr-pure-black: #000000;
    --clr-soft-black: #121212;
    --clr-elevated-black: #1a1a1a;
    --clr-gray-muted: #A0A0A0;

    --clr-pure-white: #FFFFFF;
    --clr-soft-white: #FAF9F6;
    --clr-gray-text: #505050;

    /* Variables Semanticas */
    --bg-main: var(--clr-soft-white);
    --bg-surface: var(--clr-pure-white);
    
    --text-main: var(--clr-soft-black);
    --text-muted: var(--clr-gray-text); /* Subtítulos e info secundaria */
    
    --btn-bg: var(--clr-soft-black);
    --btn-text: var(--clr-soft-white);
    

    /* Tipografía */
    --font-main: 'Lato', sans-serif;
    --font-mono: 'Roboto Mono', monospace;
    
    /* Sombras y transiciones */
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --transition-fast: color 0.3s ease, background-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

body.dark-theme {
    --bg-main: var(--clr-soft-black);
    --bg-surface: var(--clr-elevated-black);

    --text-main: var(--clr-soft-white);
    --text-muted: var(--clr-gray-muted);

    --btn-bg: var(--clr-soft-white);
    --btn-text: var(--clr-soft-black);
}

::selection {
    background-color: rgba(0, 255, 127, 0.8); /* Color de fondo del resaltado */
    color: var(--clr-soft-black); /* Color del texto resaltado */
}

::-moz-selection {
    background-color: rgba(0, 255, 127, 0.8);
    color: var(--clr-soft-black);
}