:root {
    --theme-color-preto: #000103;
    --theme-color-bege: #eee5db;
    --theme-color-carmim: #e50661;
    --theme-color-laranja: #f17a0e;
    --theme-color-amarelo: #f7cd13;
    --theme-color-rosa: #e87be7;
    --theme-color-azul: #6676e6;
    --theme-color-ciano: #02b1d2;
    --color-emphasis: #235cab;
    --color-emphasis-over: #ffffff;
    --color-accent: #a4086e;
    --font-h1: 'Bakery', sans-serif;
    --font-normal: Roboto, "Open Sans", Arial, Helvetica, sans-serif;
    --font-title: "Matt_Trial", "Ubuntu", Arial, Helvetica, sans-serif;
    --background-color: var(--theme-color-bege);
    --surface-color: hsl(from var(--background-color) h s calc(l - 20) / 0.5);
    --border-color: hsl(from var(--background-color) h calc(s - 20) calc(l - 50) / 0.5);
    --text-color: #2e1f16;
    --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-accent);
    --header-background-color: var(--theme-color-amarelo);
    --header-link-color: var(--color-emphasis);
    --header-link-active: var(--color-accent);
    --color-status-normal: var();
    --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;
    --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 + 20) / 0.5);
        --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-accent) h s calc(l + 20) / 1);

        --header-background-color: hsl(from var(--theme-color-amarelo) 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-accent) 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(var(--warning-h), 90%, 10%);
        --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%);
    }

}