/* colorbutton — основное действие, окрашено акцентом.

   В системной теме акцент приходит из ОС, поэтому кнопка меняет цвет
   вместе с остальным сайтом. */

.cb {
    padding: 10px 24px;
    border: 0;
    border-radius: 10px;
    background: var(--color-accent);
    color: var(--color-accent-fg);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--motion-control-duration, 220ms) var(--motion-ease, ease), opacity var(--motion-control-duration, 220ms) var(--motion-ease, ease);
}

/* Наведение — краской, как у остальных кнопок: фон темнеет на 12%,
   подпись остаётся чёткой. Раньше кнопка целиком гасла через opacity. */
.cb:hover {
    background: var(--color-accent-hover);
}

.cb:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Фокус — обводка акцентом: та же краска, что у других обводок сайта. */
.cb:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .cb {
        transition: none;
    }
}

.cb[data-block="1"] { width: 100%; }
.cb[data-size="confirm"] { display: grid; place-items: center; height: 44px; padding: 0 12px; border-radius: 14px; font-size: 13px; line-height: 1; white-space: nowrap; }
.cb[data-variant="danger"] { background: var(--color-danger); color: var(--color-dark); }
.cb[data-variant="danger"]:hover { background: var(--color-danger-hover); }
.cb[data-variant="secondary"] { background: var(--color-button-secondary); color: var(--color-ink); font-weight: 400; }
.cb[data-variant="secondary"]:hover { background: var(--color-accent); color: var(--color-accent-fg); }
.cb[data-size="compact"] { padding: 4px 10px; border-radius: 9px; font-size: 12px; line-height: 1.3; white-space: nowrap; }
.cb[hidden] { display: none; }