:root {
    --gap: 24px;
    --content-gap: 20px;
    --nav-width: 1024px;
    --main-width: 720px;
    --header-height: 70px;
    --footer-height: 70px;
    --radius: 8px;

    /* Paleta */
    --theme: #ffffff;
    --entry: #f9f9f9;
    --primary: #A10F2B;     /* Rojo profundo */
    --secondary: #555555;   /* Gris sobrio */
    --tertiary: #FFC400;    /* Dorado */
    --content: #2e2e2e;
    --code-block-bg: #1c1c1c;
    --code-bg: #f4f4f4;
    --border: #ddd;

    /* Color especial para hover en header */
    --header-hover-color: #003d7a; /* Azul marino */
    --header-bg: #A10F2B;       /* Rojo rojigualda */
    --header-color: #FFC400;    /* Dorado rojigualda */
    --header-hover: #003d7a;    /* Azul marino */
}

/* 🔥 Tema oscuro */
.dark {
    --theme: #1a1a1a;
    --entry: #2b2b2b;
    --primary: #FFC400;   /* Dorado como base */
    --secondary: #bbbbbb;
    --tertiary: #A10F2B;  /* Rojo como hover */
    --content: #e6e6e6;
    --code-block-bg: #2e2e2e;
    --code-bg: #3a3a3a;
    --border: #444;
    --header-hover-color: #003d7a; /* Puede mantenerse o ajustarse si quiere */
}

/* 🔗 Estilo global de enlaces */
a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--header-hover-color);
}

nav {
    background-color: var(--header-bg);
    color: var(--header-color);
}

nav a {
    color: var(--header-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

nav a:hover {
    color: var(--header-hover);
}