:root {
    /* Marca */
    --portal-color-brand: #FFD400;
    --portal-color-brand-light: #FFE45C;
    --portal-color-ink: #0B0B0B;
    --portal-color-charcoal: #181818;

    /* Superficies */
    --portal-color-page: #F7F4EA;
    --portal-color-surface: #FFFFFF;
    --portal-color-surface-alt: #EFECE3;
    --portal-color-border: #DDD9CE;

    /* Texto */
    --portal-color-title: #0B0B0B;
    --portal-color-subtitle: #34332F;
    --portal-color-text: #242421;
    --portal-color-text-muted: #5F5D56;
    --portal-color-text-disabled: #8A877E;
    --portal-color-text-inverse: #FFFFFF;

    /* Categorías */
    /* Tonos inspirados en la paleta Canva, ajustados para texto blanco legible. */
    --portal-category-default: #665F54;
    --portal-category-esta-sonando: #1673A6; /* Azul celeste */
    --portal-category-accion: #E6C65C; /* Amarillo pastel */
    --portal-category-el-foco: #D91E2E; /* Rojo brillante */
    --portal-category-entretenimiento: #8660A8; /* Lavanda claro */
    --portal-category-actualidad: #007D83; /* Cian vivido */
    --portal-category-gastronomia: #A85D32; /* Naranja pastel apagado */
    --portal-category-medio-tiempo: #C9570A; /* Naranja */
    --portal-category-parchese: #7137A8; /* Morado */
    --portal-category-a-tope: #B52C78; /* Rosa fucsia */
    --portal-category-tecnologia: #427D22; /* Verde pasto */

    /* Alias para slugs históricos o categorías equivalentes. */
    --portal-category-foco: var(--portal-category-el-foco);
    --portal-category-musica: var(--portal-category-esta-sonando);
    --portal-category-cine: var(--portal-category-accion);
    --portal-category-cultura: var(--portal-category-parchese);
    --portal-category-deportes: var(--portal-category-medio-tiempo);
    --portal-category-motor: var(--portal-category-a-tope);

    /* Tipografía */
    --portal-font-display: Montserrat, Arial, sans-serif;
    --portal-font-sans: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Espaciado y forma */
    --portal-radius-small: 4px;
    --portal-radius-medium: 8px;
    --portal-content-width: 1200px;
    --portal-reading-width: 760px;

    /* Movimiento */
    --portal-transition-fast: 180ms ease;
    --portal-transition-medium: 300ms ease;
    --portal-transition-slow: 600ms ease;
}


body {
    background: var(--portal-color-page);
    color: var(--portal-color-text);
    font-family: var(--portal-font-sans);
}


h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--portal-color-title);
    font-family: var(--portal-font-display);
}


a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--portal-color-brand);
    outline-offset: 3px;
}


.portal-category-badge {
    background: var(--portal-current-category, var(--portal-color-brand));
    color: var(--portal-color-text-inverse);
}


.portal-category-badge--accion,
.portal-category-badge--cine {
    color: var(--portal-color-ink);
}