:root {
    /*
        Variables globales paleta colores
        https://desy.aragon.es/estilos-color-paletas.html
    */
    /* Interacción (invertidos) */
    --dark-primary-light: #00475C;
    --dark-primary-base: #00afdf;
    --dark-primary-dark: #d6eaf0;

    /* Soporte (invertidos) */
    --dark-warning-light: #b88e12;
    --dark-warning-base: #fdcb33;
    --dark-warning-dark: #fef6b2;

    --dark-success-light: #1aa23a;
    --dark-success-base: #24d14c;
    --dark-success-dark: #dcf8e2;

    --dark-info-light: #c97a00;
    --dark-info-base: #fa9902;
    --dark-info-dark: #feebcc;

    --dark-alert-light: #a40014;
    --dark-alert-base: #d22333;
    --dark-alert-dark: #fbd3ce;

    /* Fondo (invertidos) */
    --dark-white: #1f2331;
    --dark-neutral-lighter: #2a2a2a;
    --dark-neutral-ligh: #3a3a3a;

    /* Contenido (invertidos) */
    --dark-neutral-base: #cfcfcf;
    --dark-neutral-dark: #e5e5e5;
    --dark-black: #e0dcce;

    /* Cabecera (invertidos) */
    --dark-heading-base: #c3cbd4;
    --dark-heading-dark: #dce1e7;

    /* Gráficas (puedes adaptar según contexto, aquí algunos invertidos aproximados) */
    --dark-color-a: #e8e0e2;
    --dark-color-b: #f0b4ac;
    --dark-color-c: #89bbc7;
    --dark-color-d: #8cd0e3;
    --dark-color-e: #9cc9da;
    --dark-color-f: #ffe066;
    --dark-color-g: #ffc49f;
    --dark-color-h: #ffb3b6;
    --dark-color-i: #cacaca;
    --dark-color-j: #cfcfcf;

    /* Interacción */
    --primary-light: #d6eaf0;
    --primary-base: #00607a;
    --primary-dark: #00475C;

    /* Soporte */
    --warning-light: #fef6b2;
    --warning-base: #fdcb33;
    --warning-dark: #b88e12;

    --success-light: #dcf8e2;
    --success-base: #24d14c;
    --success-dark: #1aa23a;

    --info-light: #feebcc;
    --info-base: #fa9902;
    --info-dark: #c97a00;

    --alert-light: #fbd3ce;
    --alert-base: #d22333;
    --alert-dark: #a40014;

    /* Fondo */
    --white: #ffffff;
    --neutral-lighter: #f6f6f5;
    --neutral-light: #ededec;

    /* Contenido */
    --neutral-base: #92949b;
    --neutral-dark: #5e616b;
    --black: #1f2331;

    /* Cabecera */
    --heading-base: #3c4c5c;
    --heading-dark: #26374a;

    /* Gráficas */
    --color-a: #4d1f2e;
    --color-b: #aa3c2b;
    --color-c: #739ba5;
    --color-d: #00607a;
    --color-e: #013c53;
    --color-f: #bc8a01;
    --color-g: #ed6c02;
    --color-h: #ed020d;
    --color-i: #646464;
    --color-j: #92949b;


    /* Spacing */

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-base: 16px;
    --spacing-lg: 28px;
    --spacing-xl: 40px;
    --spacing-2xl: 80px;
    --spacing-3xl: 160px;
}