:root {

    /* Cores de destaque */
    --color-emphasis: #f26221;
    --color-emphasis-over: #fff5c0;
    --color-link: #4120af;
    --color-link-over: #fff4f4;
    --color-differentiate: #B2005E;
    --color-differentiate-over: #fff4f4;

    /* Tipografia é definida em fonts.css */

    /* Estilos globais */
    --border-radius: 0.5rem;
    --transition-duration: 0.3s;
    --shadow-filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    --open-popup-animation: fadeIn 0.3s ease-out;
    --close-popup-animation: fadeOut 0.3s ease-out;

    /* Bordas e fundos */
    --background-color: #eef1fc;
    --bg-disabled: #b8b8b8eb;
    --background-image: url('../../assets/background-image.png');
    --background: var(--background-color) var(--background-image) no-repeat center center / cover;
    --background-gradient: linear-gradient(135deg, var(--color-emphasis) 0%, var(--color-link) 100%);
    --surface-color: hsl(from var(--background-color) h s calc(l - 20) / 0.2);
    --border-color: hsl(from var(--background-color) h calc(s - 20) calc(l - 50) / 0.5);
    
    /* Cores de texto */
    --text-color: #272442;
    --text-color-weak: hsl(from var(--text-color) h calc(s - 10) calc(l + 20) / 0.8);
    --text-color-title: var(--color-emphasis);
    --text-color-link: var(--color-link);

    /* Cores do header */
    --header-background-color: var(--color-differentiate);
    --header-link-color: var(--color-link-over);
    --header-link-active: var(--color-emphasis-over);
    
    /* Cores de status */
    --color-status-normal: hsl(from var(--background-color) h s calc(l + 3) / 1);
    --color-status-atencao: #ffe964;
    --color-status-alerta: #eb991f;
    --color-status-critico: #d11a1c;
    --color-status-positivo: #5ac05f;

    /* Cores de mensagens */
    --success-h: 140;
    --error-h: 350;
    --warning-h: 65;
    --info-h: 205;
    --color-success: hsl(var(--success-h), 60%, 35%);
    --color-success-inverse: hsl(var(--success-h), 70%, 95%);
    --color-success-border: hsl(var(--success-h), 20%, 95%);
    --color-error: hsl(var(--error-h), 70%, 50%);
    --color-error-inverse: hsl(var(--error-h), 70%, 95%);
    --color-error-border: hsl(var(--error-h), 30%, 90%);
    --color-warning: hsl(var(--warning-h), 90%, 80%);
    --color-warning-inverse: hsl(var(--warning-h), 70%, 10%);
    --color-warning-border: hsl(var(--warning-h), 50%, 30%);
    --color-info: hsl(var(--info-h), 70%, 80%);
    --color-info-inverse: hsl(var(--info-h), 70%, 10%);
    --color-info-border: hsl(var(--info-h), 40%, 40%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: hsl(from var(--theme-color-bege) h s calc(l - 100) / 1);
        --surface-color: hsl(from var(--background-color) h s calc(l + 70) / 0.2);
        --border-color: hsl(from var(--background-color) h s calc(l + 50) / 0.5);
        --text-color: hsl(from var(--theme-color-preto) h s calc(l + 90) / 1);
        --text-color-weak: hsl(from var(--text-color) h s calc(l - 10) / 0.8);
        --text-color-title: hsl(from var(--color-emphasis) h s calc(l + 20) / 1);
        --text-color-link: hsl(from var(--color-link) h s calc(l + 20) / 1);
        --header-background-color: hsl(from var(--color-emphasis) h s calc(l - 45) / 1);
        --header-link-color: hsl(from var(--color-emphasis) h calc(s - 50) calc(l + 20) / 1);
        --header-link-active: hsl(from var(--color-link) h calc(s - 50) calc(l + 30) / 1);
        --color-status-normal: var(--background-color);
        --color-status-atencao: #8e7700;
        --color-status-alerta: #a94c00;
        --color-status-critico: #a4070f;
        --color-status-positivo: #155a18;
        --color-success: hsl(var(--success-h), 60%, 35%);
        --color-success-inverse: hsl(var(--success-h), 70%, 95%);
        --color-success-border: hsl(var(--success-h), 20%, 95%);
        --color-error: hsl(var(--error-h), 70%, 50%);
        --color-error-inverse: hsl(var(--error-h), 70%, 95%);
        --color-error-border: hsl(var(--error-h), 30%, 90%);
        --color-warning: hsl(65deg 100% 14.07%);
        --color-warning-inverse: hsl(var(--warning-h), 40%, 70%);
        --color-warning-border: hsl(var(--warning-h), 50%, 30%);
        --color-info: hsl(var(--info-h), 70%, 80%);
        --color-info-inverse: hsl(var(--info-h), 70%, 10%);
        --color-info-border: hsl(var(--info-h), 40%, 40%);
    }

}