/* LIGHT THEME */
:root {
    --gold-light: #fbd8c5;
    --gold-dark: #6c2e16;
    --green-light: #bbf395;
    --green-dark: #065a00;
    --yellow-light: #f6f6a0;
    --yellow-dark: #5b4004;
    --red-light: #e06b6b;
    --red-dark: #4b0303;
    --broked-white: #e4e4e5;
    --broked-black: #3c3c43;
    --gradient-superlight: linear-gradient(rgba(255,255,255, 1), rgba(255,255,255, 0.5), rgba(13,110,253, 0.1));
    --gradient-light: linear-gradient(rgba(255,255,255, 1), rgba(110, 143, 29, 0.5));

    /* Color general */
    --web-background: #f8f9fa;
    --web-footer: #e5eaef;
    --text-high-constrast: black;
    --text-mid-contrast: #161721;
    --text-low-contrast: rgb(13, 13, 14);
    --text-heading: var(--broked-black);
    --low-contrast: rgba(226, 234, 243, 0.91);

    /* subtítulos y otros textos de menor atención (pies de imagen, etc) */
    --text-light: #3c3c43c7;
    --text-superlight: #3c3c438f;

    /* Texto coloreado, para usar con los elementos info, warning, danger, success */
    --text-info: #66758c;
    --text-danger: #8c6666;
    --text-warning: #8c8c66;
    --bg-info: #66758c10;
    --bg-warning: #8c8c6610;
    --bg-danger: #8c666610;

    /* only for quick reference, not work as var() */
    --media-sm: 576px;
    --media-md: 768px;
    --media-lg: 992px;
    --media-xl: 1200px;
    --media-xxl: 1400px;
}

/* DARK THEME */
body.dark {
    --web-background: #161721;
    --web-footer: #66758c10;
    --text-high-constrast: #fff;
    --text-mid-contrast: rgba(255, 255, 255, 0.75);
    --text-low-contrast: rgba(233, 233, 243, 0.5);
    --text-heading: #b7b4c7;
    --low-contrast: #1e1f2d;
}

/* USADO IGUAL EN LIGHT QUE EN DARK */
.box-info {
    background-color: var(--bg-info);
    color: var(--text-info);
}
.box-warning {
    background-color: var(--bg-warning);
    color: var(--bg-warning);
}
.box-danger {
    background-color: var(--bg-warning);
    color: var(--bg-danger);
}