/* =========================================================
   BUTTONS
   assets/css/components/buttons.css
   =========================================================
   Shared button component used in tool preview renderers.

   Loaded by:
     palette-builder.php
     typography-builder.php
   ========================================================= */

.tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.4rem 0.875rem;
    font-size: var(--text-xs);
    font-weight: var(--font-semi-bold);
    font-family: system-ui, -apple-system, sans-serif;
    border-radius: 0.4rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 100ms, color 100ms, border-color 100ms, transform 80ms;
    user-select: none;
}

.tool-btn:active {
    transform: scale(0.97);
}

.tool-btn--primary {
    background: var(--color-secondary);
    color: var(--text-inverse);
    padding: 0.75rem 1rem;
}

.tool-btn--primary:hover {
    background: var(--color-secondary-hover);
}

.tool-btn--secondary {
    background: var(--surface-primary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.tool-btn--secondary:hover {
    background: var(--surface-hover);
    border-color: var(--border-secondary);
}

.tool-btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-primary);
}

.tool-btn--ghost:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.tool-btn--danger {
    background: transparent;
    color: #ef4444;
    border-color: #fecaca;
}

.tool-btn--danger:hover {
    background: #fef2f2;
    border-color: #f87171;
}