html.brand-capella,
.brand-capella {
    /* ----- PARIS M  (PRIMARIO: botones, drawer, acentos fuertes) -----
       Negro / grafito de marca Capella. El 300 es el color base. */
    --paris-m-100: #5E6574; /* gris claro - hover suave / estados        */
    --paris-m-200: #474C58; /* gris medio                                 */
    --paris-m-300: #2C2F36; /* BASE primario (13.40:1 vs blanco)          */
    --paris-m-400: #23252B; /* hover/active                               */
    --paris-m-500: #1C1E22; /* pressed/oscuro                             */
    /* ----- RESOLUTION BLUE  (SECUNDARIO) -----
       Champagne/oro apagado, derivado del boton del hero de Capella. */
    --resolution-blue-100: #C0B086;
    --resolution-blue-200: #B5A372;
    --resolution-blue-300: #AA965E;
    --resolution-blue-400: #96834F; /* 3.71:1 */
    --resolution-blue-500: #7F6E43; /* 4.98:1 - usar este si lleva texto blanco */
    /* ----- SUMMER SKY  (ACENTO / focus / bordes / detalles) -----
       Dorado VIVO del logo. El color de identidad de Capella. Pensado para
       bordes, iconos, focus-ring, links y detalles; NO como relleno de boton
       con texto blanco (contraste bajo a proposito). */
    --summer-sky-100: #F4D283;
    --summer-sky-200: #F3CB70;
    --summer-sky-300: #F1C55E;
    --summer-sky-400: #EFBA41;
    --summer-sky-500: #ECB025; /* acento principal (≈ dorado de marca #EEB738) */
}