﻿:root {
    --btn-primary-bg: #2f6ef4;
    --btn-primary-border: #2f6ef4;
    --btn-primary-fg: #ffffff;
    --btn-success-bg: #1c7a3b;
    --btn-success-border: #1c7a3b;
    --btn-success-fg: #ffffff;
    --btn-secondary-bg: #ffffff;
    --btn-secondary-border: #cfd8e4;
    --btn-secondary-fg: #23364a;
    --btn-danger-bg: #fff3f4;
    --btn-danger-border: #efc4c8;
    --btn-danger-fg: #9a2a37;
}

@keyframes evargo-btn-spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

.btn,
.btn-filter,
.btn-update,
.cogs-btn,
.btn-sync,
.btn-secondary,
.tiny-btn,
.mini,
.btn-inline,
.sku-save,
.finder-btn,
.acc-save-btn,
.btn-profile,
input[type="submit"],
button[type="submit"],
button.form-submit,
button.submit {
    border-radius: 10px;
    font-weight: 700;
    line-height: 1.2;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}

.btn-filter,
.btn-update,
.btn-sync,
.acc-save-btn,
.btn-primary,
.btn.primary,
.primary,
input[type="submit"],
button[type="submit"],
button.form-submit,
button.submit {
    background: var(--btn-primary-bg);
    border: 1px solid var(--btn-primary-border);
    color: var(--btn-primary-fg);
}

.btn.success,
.success {
    background: var(--btn-success-bg);
    border: 1px solid var(--btn-success-border);
    color: var(--btn-success-fg);
}

.btn,
.cogs-btn,
.btn-inline,
.sku-save,
.finder-btn,
.btn-profile,
.btn-secondary,
.tiny-btn,
.mini {
    background: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
    color: var(--btn-secondary-fg);
}

.btn-delete,
.row-remove,
.btn-danger,
.btn.danger,
button.danger[type="submit"],
.mini.danger {
    background: var(--btn-danger-bg);
    border: 1px solid var(--btn-danger-border);
    color: var(--btn-danger-fg);
}

button[disabled],
input[disabled],
button.is-loading,
input.is-loading {
    opacity: .72;
    cursor: not-allowed !important;
}

button.is-loading,
input.is-loading {
    pointer-events: none;
}

button.is-loading {
    position: relative;
    padding-right: 30px !important;
}

button.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 12px;
    height: 12px;
    margin-top: 0;
    border: 2px solid rgba(255, 255, 255, .72);
    border-top-color: transparent;
    border-radius: 999px;
    transform: translateY(-50%);
    animation: evargo-btn-spin .72s linear infinite;
}

button.is-loading.btn-secondary::after,
button.is-loading.btn::after,
button.is-loading.btn.danger::after,
button.is-loading.btn-delete::after,
button.is-loading.row-remove::after,
button.is-loading.mini.danger::after,
button.is-loading.btn-danger::after,
button.is-loading.btn-inline::after,
button.is-loading.finder-btn::after,
button.is-loading.tiny-btn::after,
button.is-loading.mini::after,
button.is-loading.cogs-btn::after {
    border-color: rgba(35, 54, 74, .48);
    border-top-color: transparent;
}

html.dark-mode button.is-loading.btn-secondary::after,
html.dark-mode button.is-loading.btn::after,
html.dark-mode button.is-loading.btn-inline::after,
html.dark-mode button.is-loading.finder-btn::after,
html.dark-mode button.is-loading.tiny-btn::after,
html.dark-mode button.is-loading.mini::after,
html.dark-mode button.is-loading.cogs-btn::after {
    border-color: rgba(232, 237, 243, .48);
    border-top-color: transparent;
}

/* Phase 1 platform action tokens. Keep this after legacy declarations. */
:root {
    --ev-panel: #ffffff;
    --ev-ink: #17202a;
    --ev-line-strong: #b8c7d6;
    --ev-primary: #116a5b;
    --ev-primary-hover: #0b5147;
    --ev-accent: #c43f4f;
    --ev-accent-soft: #ffe7eb;
    --ev-radius: 8px;

    --btn-primary-bg: var(--ev-primary);
    --btn-primary-border: var(--ev-primary);
    --btn-success-bg: var(--ev-primary);
    --btn-success-border: var(--ev-primary);
    --btn-secondary-bg: var(--ev-panel);
    --btn-secondary-border: var(--ev-line-strong);
    --btn-secondary-fg: var(--ev-ink);
    --btn-danger-bg: var(--ev-accent-soft);
    --btn-danger-border: #f2c0c8;
    --btn-danger-fg: var(--ev-accent);
}

.btn,
.btn-filter,
.btn-update,
.cogs-btn,
.btn-sync,
.btn-secondary,
.tiny-btn,
.mini,
.btn-inline,
.sku-save,
.finder-btn,
.acc-save-btn,
.btn-profile,
input[type="submit"],
button[type="submit"],
button.form-submit,
button.submit {
    border-radius: var(--ev-radius) !important;
    font-family: "Manrope", "Segoe UI", Arial, sans-serif;
    font-weight: 800;
}

.btn-filter:hover,
.btn-update:hover,
.btn-sync:hover,
.acc-save-btn:hover,
.btn-primary:hover,
.btn.primary:hover,
.primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
button.form-submit:hover,
button.submit:hover {
    background: var(--ev-primary-hover);
    border-color: var(--ev-primary-hover);
}

.btn:hover,
.cogs-btn:hover,
.btn-inline:hover,
.sku-save:hover,
.finder-btn:hover,
.btn-profile:hover,
.btn-secondary:hover,
.tiny-btn:hover,
.mini:hover {
    border-color: var(--ev-primary);
    color: var(--ev-primary);
}

