@property --vantara-reaction-level {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

:root {
    --reaction-error-soft: #fef2f2;
    --reaction-error-surface: #fee2e2;
    --reaction-error-border: #fecaca;
    --reaction-error-main: #dc2626;
    --reaction-error-strong: #b91c1c;
    --reaction-error-dark: #7f1d1d;
    --reaction-error-ring: rgba(220, 38, 38, 0.38);

    --vantara-reaction-level: 0;

    --vantara-project-main:
        color-mix(
            in srgb,
            #0145f2,
            var(--reaction-error-main)
            calc(var(--vantara-reaction-level) * 100%)
        );
    --vantara-project-strong:
        color-mix(
            in srgb,
            #013bd1,
            var(--reaction-error-strong)
            calc(var(--vantara-reaction-level) * 100%)
        );
    --vantara-project-accent:
        color-mix(
            in srgb,
            #4debff,
            #ef4444
            calc(var(--vantara-reaction-level) * 100%)
        );
    --vantara-project-button-end:
        color-mix(
            in srgb,
            #2563eb,
            #ef4444
            calc(var(--vantara-reaction-level) * 100%)
        );
    --vantara-project-soft:
        color-mix(
            in srgb,
            #f1f6ff,
            var(--reaction-error-soft)
            calc(var(--vantara-reaction-level) * 100%)
        );
    --vantara-project-border:
        color-mix(
            in srgb,
            #bfdbfe,
            var(--reaction-error-border)
            calc(var(--vantara-reaction-level) * 100%)
        );

    --vantara-vacancy-main:
        color-mix(
            in srgb,
            #047857,
            var(--reaction-error-main)
            calc(var(--vantara-reaction-level) * 100%)
        );
    --vantara-vacancy-strong:
        color-mix(
            in srgb,
            #065f46,
            var(--reaction-error-strong)
            calc(var(--vantara-reaction-level) * 100%)
        );
    --vantara-vacancy-accent:
        color-mix(
            in srgb,
            #34d399,
            #ef4444
            calc(var(--vantara-reaction-level) * 100%)
        );
    --vantara-vacancy-button-end:
        color-mix(
            in srgb,
            #10b981,
            #ef4444
            calc(var(--vantara-reaction-level) * 100%)
        );
    --vantara-vacancy-soft:
        color-mix(
            in srgb,
            #ecfdf5,
            var(--reaction-error-soft)
            calc(var(--vantara-reaction-level) * 100%)
        );
    --vantara-vacancy-border:
        color-mix(
            in srgb,
            #a7f3d0,
            var(--reaction-error-border)
            calc(var(--vantara-reaction-level) * 100%)
        );

    --vantara-premium-main:
        color-mix(
            in srgb,
            #d97706,
            var(--reaction-error-main)
            calc(var(--vantara-reaction-level) * 100%)
        );
    --vantara-premium-soft:
        color-mix(
            in srgb,
            #fffbeb,
            var(--reaction-error-soft)
            calc(var(--vantara-reaction-level) * 100%)
        );
    --vantara-premium-border:
        color-mix(
            in srgb,
            #fde68a,
            var(--reaction-error-border)
            calc(var(--vantara-reaction-level) * 100%)
        );

    --vantara-tutorial-main:
        color-mix(
            in srgb,
            #7c3aed,
            var(--reaction-error-main)
            calc(var(--vantara-reaction-level) * 100%)
        );
    --vantara-tutorial-strong:
        color-mix(
            in srgb,
            #6d28d9,
            var(--reaction-error-strong)
            calc(var(--vantara-reaction-level) * 100%)
        );
    --vantara-tutorial-dark:
        color-mix(
            in srgb,
            #5b21b6,
            var(--reaction-error-dark)
            calc(var(--vantara-reaction-level) * 100%)
        );
    --vantara-tutorial-accent:
        color-mix(
            in srgb,
            #c084fc,
            #ef4444
            calc(var(--vantara-reaction-level) * 100%)
        );
    --vantara-tutorial-soft:
        color-mix(
            in srgb,
            #f5f3ff,
            var(--reaction-error-soft)
            calc(var(--vantara-reaction-level) * 100%)
        );
    --vantara-tutorial-border:
        color-mix(
            in srgb,
            #ddd6fe,
            var(--reaction-error-border)
            calc(var(--vantara-reaction-level) * 100%)
        );

    /* Compatibilidade com os tokens já usados no feed e no tutorial. */
    --blue: var(--vantara-project-main);
    --cyan: var(--vantara-project-accent);

    --blue-dark:
        color-mix(
            in srgb,
            #0138c7,
            var(--reaction-error-strong)
            calc(var(--vantara-reaction-level) * 100%)
        );
    --green:
        color-mix(
            in srgb,
            #087f5b,
            var(--reaction-error-main)
            calc(var(--vantara-reaction-level) * 100%)
        );
    --green-dark:
        color-mix(
            in srgb,
            #056347,
            var(--reaction-error-strong)
            calc(var(--vantara-reaction-level) * 100%)
        );
    --green-soft:
        color-mix(
            in srgb,
            #ecfdf5,
            var(--reaction-error-soft)
            calc(var(--vantara-reaction-level) * 100%)
        );

    --tutorial-bg:
        color-mix(
            in srgb,
            #f5f3ff,
            var(--reaction-error-soft)
            calc(var(--vantara-reaction-level) * 100%)
        );
    --tutorial-soft:
        color-mix(
            in srgb,
            #ede9fe,
            var(--reaction-error-surface)
            calc(var(--vantara-reaction-level) * 100%)
        );
    --tutorial-border: var(--vantara-tutorial-border);
    --tutorial-main: var(--vantara-tutorial-main);
    --tutorial-strong: var(--vantara-tutorial-strong);
    --tutorial-dark: var(--vantara-tutorial-dark);
    --tutorial-accent: var(--vantara-tutorial-accent);
    --tutorial-text:
        color-mix(
            in srgb,
            #4c1d95,
            var(--reaction-error-dark)
            calc(var(--vantara-reaction-level) * 100%)
        );
    --tutorial-ring:
        color-mix(
            in srgb,
            rgba(192, 132, 252, 0.55),
            var(--reaction-error-ring)
            calc(var(--vantara-reaction-level) * 100%)
        );
}

html.vantara_user_error_enter {
    transition:
        --vantara-reaction-level 200ms ease;
}

html.vantara_user_error_active {
    --vantara-reaction-level: 1;
}

html.vantara_user_error_exit {
    --vantara-reaction-level: 0;
    transition:
        --vantara-reaction-level 400ms ease;
}

.vantara_reactive_color {
    color: var(--vantara-project-main) !important;
}

.vantara_reactive_background {
    background:
        linear-gradient(
            135deg,
            var(--vantara-project-main),
            var(--vantara-project-button-end)
        ) !important;
}

.vantara_reactive_border {
    border-color: var(--vantara-project-border) !important;
}

.vantara_reactive_fill {
    fill: currentColor !important;
}

.vantara_reactive_stroke {
    stroke: currentColor !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) :is(
    .discovery_identity_line,
    .dashboard_identity_line,
    .dashboard_panel_line,
    .projects_identity_line,
    .projects_panel_line,
    .settings_identity_line,
    .settings_panel_line,
    .security_identity_line,
    .security_panel_line,
    .project_identity_line,
    .vantara_reactive_line
) {
    background:
        linear-gradient(
            90deg,
            var(--vantara-project-main),
            var(--vantara-project-accent)
        ) !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) .unsaved_changes_bar::before {
    background:
        linear-gradient(
            90deg,
            var(--vantara-project-main),
            var(--vantara-project-accent)
        ) !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) :is(
    .jobs_identity_line,
    .jobs_panel_line,
    .job_card_line,
    .vantara_identity_line,
    .vaga_card_line,
    .vaga_modal_line:not(.danger)
) {
    background:
        linear-gradient(
            90deg,
            var(--vantara-vacancy-main),
            var(--vantara-vacancy-accent)
        ) !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) :is(
    .feed_card,
    .card
)::before,
html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) .sidebar_action_panel::before {
    background:
        linear-gradient(
            180deg,
            var(--vantara-project-main),
            var(--vantara-project-accent)
        ) !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) :is(
    .vacancy_card,
    .card_vagas
)::before,
html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) .vaga_apply_panel::before,
html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) .vacancy_summary::before {
    background:
        linear-gradient(
            180deg,
            var(--vantara-vacancy-main),
            var(--vantara-vacancy-accent)
        ) !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) .tutorial_configuracao_card::before {
    background:
        linear-gradient(
            90deg,
            var(--vantara-tutorial-strong),
            var(--vantara-tutorial-accent)
        ) !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) :is(
    .lado_esquerdo,
    .botao_login,
    #cadastroForm button[type="submit"],
    .dashboard_header_action:not(.dashboard_header_action_vagas),
    .primary,
    .vantara_button_primary,
    .account_status_primary,
    .editarBtn,
    #criarBtn,
    #salvarBtn
) {
    background:
        linear-gradient(
            135deg,
            var(--vantara-project-main),
            var(--vantara-project-button-end)
        ) !important;
    border-color: var(--vantara-project-border) !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) :is(
    .dashboard_header_action_vagas,
    .jobs_header_action,
    .job_card_action:not(.secondary),
    .vacancy_primary,
    .vantara_button_jobs,
    .vaga_btn_green,
    .vaga_validation_toast,
    .vantara_btn.primary,
    .vagasBtn
) {
    background:
        linear-gradient(
            135deg,
            var(--vantara-vacancy-strong),
            var(--vantara-vacancy-button-end)
        ) !important;
    border-color: var(--vantara-vacancy-border) !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) .vaga_validation_toast {
    box-shadow:
        0 14px 32px
        color-mix(
            in srgb,
            rgba(4,120,87,.20),
            var(--reaction-error-ring)
            calc(var(--vantara-reaction-level) * 100%)
        ) !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) .vantara_reactive_modal_title {
    color:
        color-mix(
            in srgb,
            #0f172a,
            var(--reaction-error-strong)
            calc(var(--vantara-reaction-level) * 100%)
        ) !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) :is(
    .vantara_tutorial_botao_primario,
    .tutorial_configuracao_botao
) {
    background: var(--vantara-tutorial-main) !important;
    border-color: var(--vantara-tutorial-main) !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) :is(
    .dashboard_kicker,
    .projects_kicker,
    .settings_kicker,
    .security_kicker,
    .project_kicker,
    .project_area,
    .section_heading > span,
    .section_title > span,
    .sidebar_action_panel > span,
    .dossier_breadcrumb a,
    .settings_sidebar_card > span,
    .security_sidebar_card > span,
    .navbar nav a.active
) {
    color: var(--vantara-project-main) !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) :is(
    .jobs_kicker,
    .vagas_kicker,
    .vacancy_label,
    .vacancy_project_area,
    .job_project > span,
    .vagas_resumo_header > span,
    .vaga_modal_card:not(.danger) .vaga_modal_kicker
) {
    color: var(--vantara-vacancy-main) !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) :is(
    .status_badge,
    .skill_tag:not(.muted),
    .active_filter,
    .vantara_badge:not(.vantara_badge_invest),
    .vantara_tag,
    .tag_chip,
    .dashboard_panel .tags span
) {
    color: var(--vantara-project-main) !important;
    background: var(--vantara-project-soft) !important;
    border-color: var(--vantara-project-border) !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) :is(
    .vacancy_status,
    .vacancy_signal,
    .vacancy_skills .skill_tag,
    .job_status:not(.fechada),
    .job_tag,
    .vaga_status:not(.fechada),
    .vaga_tag,
    .vantara_badge_invest,
    .vaga_project_badge,
    .vaga_tag_chip
) {
    color: var(--vantara-vacancy-strong) !important;
    background: var(--vantara-vacancy-soft) !important;
    border-color: var(--vantara-vacancy-border) !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) :is(
    .investment_signal,
    .premium_badge,
    .destaque_vantara
) {
    color: var(--vantara-premium-main) !important;
    background: var(--vantara-premium-soft) !important;
    border-color: var(--vantara-premium-border) !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) :is(
    .vantara_tutorial_etapa,
    .vantara_tutorial_instrucao,
    .tutorial_configuracao_rotulo,
    .vantara_tutorial_botao_secundario,
    .vantara_tutorial_toast
) {
    color: var(--vantara-tutorial-dark) !important;
    border-color: var(--vantara-tutorial-border) !important;
}

html.vantara_user_error_active
    :is(
        .vantara_reactive_card,
        .card,
        .card_login,
        .feed_discovery,
        .feed_card,
        .welcome,
        .insight_panel,
        .vacancy_summary,
        .dashboard_header,
        .dashboard_panel,
        .projeto,
        .projects_header,
        .projects_panel,
        .projeto_card,
        .jobs_header,
        .jobs_panel,
        .job_card,
        .project_header,
        .project_section,
        .links_panel,
        .project_jobs_panel,
        .sidebar_panel,
        .sidebar_action_panel,
        .vantara_panel,
        .project_context_card,
        .vaga_card,
        .vaga_detail_header,
        .vaga_section,
        .vaga_sidebar_panel,
        .vaga_apply_panel,
        .settings_header,
        .settings_panel,
        .settings_sidebar_card,
        .profile_preview,
        .selected_tags_box,
        .available_tags_box,
        .security_header,
        .security_panel,
        .security_sidebar_card,
        .security_action_box,
        .danger_box,
        .account_status_card,
        .vaga_modal_card,
        .vantara_tutorial_card,
        .tutorial_configuracao_card
    ) {
    will-change: translate;
}

html.vantara_user_error_shake
    :is(
        .vantara_reactive_card,
        .card,
        .card_login,
        .feed_discovery,
        .feed_card,
        .welcome,
        .insight_panel,
        .vacancy_summary,
        .dashboard_header,
        .dashboard_panel,
        .projeto,
        .projects_header,
        .projects_panel,
        .projeto_card,
        .jobs_header,
        .jobs_panel,
        .job_card,
        .project_header,
        .project_section,
        .links_panel,
        .project_jobs_panel,
        .sidebar_panel,
        .sidebar_action_panel,
        .vantara_panel,
        .project_context_card,
        .vaga_card,
        .vaga_detail_header,
        .vaga_section,
        .vaga_sidebar_panel,
        .vaga_apply_panel,
        .settings_header,
        .settings_panel,
        .settings_sidebar_card,
        .profile_preview,
        .selected_tags_box,
        .available_tags_box,
        .security_header,
        .security_panel,
        .security_sidebar_card,
        .security_action_box,
        .danger_box,
        .account_status_card,
        .vaga_modal_card,
        .vantara_tutorial_card,
        .tutorial_configuracao_card
    ) {
    animation:
        vantaraUserErrorShake 220ms ease-in-out 1;
}

@keyframes vantaraUserErrorShake {
    0%,
    100% {
        translate: 0 0;
    }

    25% {
        translate: -2px 0;
    }

    50% {
        translate: 2px 0;
    }

    75% {
        translate: -1px 0;
    }
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) :is(
    .chat_composer textarea,
    .chat_inline_feedback
) {
    border-color:
        color-mix(
            in srgb,
            #dbe3f0,
            var(--reaction-error-main)
            calc(var(--vantara-reaction-level) * 100%)
        ) !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) .chat_composer textarea {
    background:
        color-mix(
            in srgb,
            #f8fafc,
            var(--reaction-error-soft)
            calc(var(--vantara-reaction-level) * 100%)
        ) !important;
    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            transparent,
            var(--reaction-error-ring)
            calc(var(--vantara-reaction-level) * 100%)
        ) !important;
}

html:is(
    .vantara_user_error_enter,
    .vantara_user_error_active,
    .vantara_user_error_exit
) .chat_send_button {
    border-color: var(--vantara-project-border) !important;
    background:
        linear-gradient(
            135deg,
            var(--vantara-project-strong),
            var(--vantara-project-button-end)
        ) !important;
}

html.vantara_user_error_shake
    :is(
        .chat_composer,
        .chat_inline_feedback
    ) {
    animation:
        vantaraUserErrorShake 220ms ease-in-out 1;
}

@supports not (color: color-mix(in srgb, #000000, #ffffff)) {
    html.vantara_user_error_active {
        --blue: var(--reaction-error-main);
        --blue-dark: var(--reaction-error-strong);
        --cyan: #ef4444;
        --green: var(--reaction-error-main);
        --green-dark: var(--reaction-error-strong);
        --green-soft: var(--reaction-error-soft);
        --tutorial-main: var(--reaction-error-main);
        --tutorial-strong: var(--reaction-error-strong);
        --tutorial-dark: var(--reaction-error-dark);
        --tutorial-accent: #ef4444;
        --tutorial-soft: var(--reaction-error-soft);
        --tutorial-border: var(--reaction-error-border);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.vantara_user_error_enter {
        transition:
            --vantara-reaction-level 120ms ease;
    }

    html.vantara_user_error_exit {
        transition:
            --vantara-reaction-level 180ms ease;
    }

    html.vantara_user_error_shake
        :is(
            .vantara_reactive_card,
            .card,
            .card_login,
            .feed_discovery,
            .feed_card,
            .dashboard_header,
            .dashboard_panel,
            .projects_header,
            .projects_panel,
            .jobs_header,
            .jobs_panel,
            .job_card,
            .project_header,
            .project_section,
            .vantara_panel,
            .vaga_card,
            .settings_header,
            .settings_panel,
            .security_header,
            .security_panel,
            .vaga_modal_card,
            .vantara_tutorial_card
        ) {
        animation: none !important;
        translate: 0 0 !important;
    }
}