:root {
    /* ALERT COLORS */
    --ok-alert-bg: #198754;
    --ok-alert-fg: #FFF;
    --warning-alert-bg: #FFC107;
    --warning-alert-fg: #000;
    --danger-alert-bg: #DC3545;
    --danger-alert-fg: #FFF;
    --old-alert-bg: #000;
    --old-alert-fg: #FFF;

    /* BASE COLORS */
    --bg-color: #f3f6ef;
    --content-bg-color: #FFF;
    --highlight-color: #cf0004;

    /* COLORS */
    --color-brand-primary: #e39947;
    --color-brand-secondary: #fce8b2;
    --color-brand-accent: #9e5825;

    --color-text-primary: #49341c;
    --color-text-secondary: #9e5825;
    --color-text-tertiary: #e39947;
    --color-text-light: #fce8b2;
    --color-text-alt: #295561;

    --color-interactive-default: #295561;
    --color-interactive-hover: #204f58;
    --color-interactive-active: #4f705b;
    --color-interactive-highlight: #ab833f;

    --color-ui-border: #85a98d;
    --color-ui-background: #fce8b2;
    --color-ui-shadow: rgba(0, 0, 0, 0.1);
    --color-ui-alt-background: #85a98d;

    --color-accent-1: #f5c776;
    --color-accent-2: #4f705b;

    /* Tipografía */
    --font-title: 'Bebas Neue', sans-serif;
    --font-body: 'Source Sans Pro', sans-serif;
    --font-size-h1: 4rem;
    --font-size-h2: 3rem;
    --font-size-h3: 2rem;
    --font-size-h4: 1.5rem;
    --font-size-h5: 1.25rem;
    --font-size-h6: 1rem;
    --font-size-body: 1rem;
    --font-size-body-lg: 1.25rem;
    --font-size-body-sm: 0.875rem;
    --font-size-button: 1rem;

    /* Breakpoints */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;


    /* FONTS */
    --body-font-family: "Source Sans Pro", sans-serif;
    --title-font-family: "Bebas Neue", sans-serif;
    --body-size: 1.35rem;
    --h1-size: 4rem;

    /* SIZES */
    --header-height:  4.5em;
    --user-header-height:  3.5em;
    --x-padding: 2em;

    /* MENU SIZES */
    --user-menu-lg-size: 250px;

    /* DEVICES */
    --sm-size: 576px;
    --md-size: 768px;
    --lg-size: 992px;
    --xl-size: 1200px;
    --xxl-size: 1400px;

    /* ICON SIZES */
    --icon-sm: 1em;
    --icon-md: 2em;
    --icon-lg: 3em;
    --icon-xl: 5em;
    --icon-xxl: 9em;
}

@keyframes ok-alert {
    0%, 100% {
        background-color: var(--ok-alert-bg);
        color: var(--ok-alert-fg);
    }
    50% {
        background-color: transparent;
        color: #000;
    }
}

@keyframes warning-alert {
    0%, 100% {
        background-color: var(--warning-alert-bg);
        color: var(--warning-alert-fg);
    }
    50% {
        background-color: transparent;
        color: #000;
    }
}

@keyframes danger-alert {
    0%, 100% {
        background-color: var(--danger-alert-bg);
        color: var(--danger-alert-fg);
    }
    50% {
        background-color: transparent;
        color: #000;
    }
}

@keyframes old-alert {
    0%, 100% {
        background-color: var(--old-alert-bg);
        color: var(--old-alert-fg);
    }
    50% {
        background-color: transparent;
        color: #000;
    }
}