/**
 * Shared button styles.
 *
 * Purpose:
 * - Provides reusable System button variants for New System module pages.
 * - Keeps button color, typography, spacing, focus, hover, active, and
 *   disabled states consistent while consuming shared theme.css tokens.
 *
 * Related Assets:
 * - public/web/assets/css/theme.css
 */

.system-button {
    align-items: center;
    appearance: none;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-line-strong, #cfd8e6);
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--color-text, #0f172a);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--system-font-family, Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: var(--system-font-control-size, 13px);
    font-weight: 800;
    gap: 8px;
    justify-content: center;
    line-height: 1.35;
    min-height: 40px;
    padding: 9px 16px;
    text-align: center;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
    user-select: none;
    white-space: nowrap;
}

.system-button:hover {
    background: var(--color-surface-soft, #f7fafc);
    border-color: var(--color-line-strong, #cfd8e6);
}

.system-button:focus-visible {
    outline: 2px solid var(--color-primary-border, #bce8c9);
    outline-offset: 2px;
}

.system-button:active {
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.12);
}

.system-button img,
.system-button svg {
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
}

.system-button--icon {
    background: var(--color-surface, #ffffff);
    border-color: var(--color-line, #dfe6f2);
    border-radius: 8px;
    color: var(--color-text, #0f172a);
    min-height: 40px;
    padding: 0;
    width: 40px;
}

.system-button--icon:hover {
    background: var(--color-surface-soft, #f7fafc);
    border-color: var(--color-line-strong, #cfd8e6);
}

.system-button--primary {
    background: var(--color-primary, #00b845);
    border-color: var(--color-primary, #00b845);
    color: var(--color-primary-contrast, #ffffff);
}

.system-button--primary:hover {
    background: var(--color-primary-dark, #05933d);
    border-color: var(--color-primary-dark, #05933d);
}

.system-button--secondary {
    background: var(--color-surface, #ffffff);
    border-color: var(--color-primary, #00b845);
    color: var(--color-primary-dark, #05933d);
}

.system-button--secondary:hover {
    background: var(--color-primary-soft, #eef8f1);
    border-color: var(--color-primary-dark, #05933d);
}

.system-button--neutral {
    background: var(--color-surface, #ffffff);
    border-color: var(--color-line, #dfe6f2);
    color: var(--color-text, #0f172a);
}

.system-button--neutral:hover {
    background: var(--color-surface-soft, #f7fafc);
    border-color: var(--color-line-strong, #cfd8e6);
}

.system-button--soft {
    background: var(--color-primary-soft, #eef8f1);
    border-color: var(--color-primary-border, #bce8c9);
    color: var(--color-primary-dark, #05933d);
}

.system-button--soft:hover {
    background: var(--color-primary-hover-soft, #e2f8e9);
    border-color: var(--color-primary, #00b845);
}

.system-button--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--color-primary-dark, #05933d);
    min-height: 32px;
    padding: 5px 8px;
}

.system-button--ghost:hover {
    background: var(--color-primary-soft, #eef8f1);
    border-color: transparent;
}

.system-button--plain {
    background: transparent;
    border-color: transparent;
    color: var(--color-text, #0f172a);
    font-weight: 700;
    min-height: 32px;
    padding: 5px 8px;
}

.system-button--plain:hover {
    background: var(--color-surface-soft, #f7fafc);
    border-color: transparent;
}

.system-button--danger {
    background: var(--color-danger, #d33b34);
    border-color: var(--color-danger, #d33b34);
    color: #ffffff;
}

.system-button--danger:hover {
    background: var(--color-danger-dark, #e10f0f);
    border-color: var(--color-danger-dark, #e10f0f);
}

.system-button--active {
    background: var(--color-primary, #00b845);
    border-color: var(--color-primary, #00b845);
    color: var(--color-primary-contrast, #ffffff);
}

.system-button--small {
    border-radius: 7px;
    font-size: var(--system-font-caption-size, 12px);
    min-height: 32px;
    padding: 6px 10px;
}

.system-button--wide {
    width: 100%;
}

.system-button[disabled],
.system-button[aria-disabled="true"],
.system-button--disabled {
    background: var(--color-surface-soft, #f7fafc);
    border-color: var(--color-line, #dfe6f2);
    box-shadow: none;
    color: var(--color-muted, #617089);
    cursor: not-allowed;
    opacity: 0.62;
}

.system-button[disabled]:hover,
.system-button[aria-disabled="true"]:hover,
.system-button--disabled:hover {
    background: var(--color-surface-soft, #f7fafc);
    border-color: var(--color-line, #dfe6f2);
    color: var(--color-muted, #617089);
}