:root {
    --color-primary: #D4AF37;      /* Dorado principal */
    --color-secondary: #B4B4B4;    /* Gris piedra técnica */
    --color-background: #F9F6EF;   /* Champán claro */
    --color-section-bg: #FFFFFF;   /* Blanco puro */
    --color-text: #1A1A1A;         /* Negro elegante */
    --color-accent: #00D2BE;       /* Teal Mercedes claro */
    --color-border: #B4B4B4;       /* Gris piedra técnica */
    --color-title: #D4AF37;        /* Dorado principal */
}

body.dark {
    --color-primary: #00B2A9;      /* Petronas Teal */
    --color-secondary: #7A8C97;    /* Gris niebla técnica */
    --color-background: #0A1F2C;   /* Azul profundo marino */
    --color-section-bg: #123B46;   /* Azul petróleo */
    --color-text: #F2F2F2;         /* Blanco hielo */
    --color-accent: #4EF1E5;       /* Verde aguamarina claro */
    --color-border: #7A8C97;       /* Gris niebla técnica */
    --color-title: #4EF1E5;        /* Verde aguamarina claro */
}

/* Puedes agregar esto en tu style.css para personalizar el enlace activo */
.active-section-link {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transition: color 0.2s, border-bottom 0.2s;
}

/* Navbar hover: highlight stronger with underline + glow */
nav a {
    position: relative;
    transition: color 0.15s ease-in-out, text-shadow 0.15s ease-in-out;
}
nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background: var(--color-primary);
    box-shadow: 0 0 8px var(--color-accent);
    transition: width 0.18s ease-in-out;
}
nav a:hover {
    color: var(--color-title);
    text-shadow: 0 0 6px var(--color-accent);
}
nav a:hover::after {
    width: 100%;
}

/* Viewer-only: enlarge paragraph text in standalone sections */
.viewer #section-host p {
    font-size: 1.4rem;
    line-height: 1.8;
}

/* Main page: enlarge paragraphs inside section containers */
body:not(.viewer) #about-container p,
body:not(.viewer) #skills-container p,
body:not(.viewer) #services-container p,
body:not(.viewer) #projects-container p,
body:not(.viewer) #vibecoding-container p,
body:not(.viewer) #blog-container p,
body:not(.viewer) #contact-container p {
    font-size: 1.4rem;
    line-height: 1.8;
}