* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:-webkit-full-screen-ancestor {
    box-sizing: content-box;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

/* VARIABLES DE COLOR  es una pseudoclase que selecciona el elemento raíz del documento*/
:root {
    --bg-dark: hsl(228 100% 3%);
    --bg: hsl(218 89% 6%);
    --bg-light: hsl(216, 100%, 92%);
    --text: hsl(214 100% 98%);
    --text-muted: hsl(215, 26%, 16%);
    --highlight: hsl(214 37% 41%);
    --border: hsl(213 48% 30%);
    --border-muted: hsl(213 73% 19%);
    --primary: hsl(214 78% 73%);
    --secondary: hsl(35 58% 62%);
    --danger: hsl(9 42% 65%);
    --warning: hsl(51 29% 53%);
    --success: hsl(148 27% 56%);
    --info: hsl(217 46% 66%);
}

/* ===== ESTILOS GENERALES ===== */
body {
    background: var(--bg-dark);
    color: var(--text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: all 0.3s;
}


h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    margin-bottom: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}
p {
    color: var(--text);
    margin-bottom: 15px;
    line-height: 1.6;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* ===== MODO CLARO cuando el checkbox está marcado  el codigo cambia el color por la variable de root===== */
body:has(#lightmode-toggle:checked) {  
    background: var(--bg-light);
    color: var(--text-muted);
}

body:has(#lightmode-toggle:checked) main {
    background: var(--bg);
}
body:has(#lightmode-toggle:checked) .name  {
    color: var(--text-muted); /* Oscuro en modo claro */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-shadow: 2px 2px 4px var(--bg-light);
}

/* Modo claro - cambiar color del texto */
body:has(#lightmode-toggle:checked) h1,
body:has(#lightmode-toggle:checked) h2,
body:has(#lightmode-toggle:checked) h3,
body:has(#lightmode-toggle:checked) h4,
body:has(#lightmode-toggle:checked) h5,
body:has(#lightmode-toggle:checked) h6,
body:has(#lightmode-toggle:checked) p,
body:has(#lightmode-toggle:checked) span {
    color: var(--text-muted); /* Oscuro en modo claro */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-shadow: 2px 2px 4px var(--bg-light);
}

/* Modo claro del texto */
body:has(#lightmode-toggle:checked) .MAIN h3,
body:has(#lightmode-toggle:checked) .MAIN p {
    color: var(--text-muted); /* Oscuro en modo claro */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);     
}