/* <Button /> — lm-button-* convention.
   Consumes the global token spine only: no hardcoded color, radius, spacing
   or motion. The accent comes from --lm-main-color, so a theme (or .lm-purple,
   .lm-green...) recolors every button. Per-color variants map onto the shared
   semantic tokens; hover/tint are color-mix derivations of that one color. */
.lm-button {
    /* Accent from the spine; original #2563eb is the standalone fallback so
       the component renders identically with NO global stylesheet loaded.
       deep/tint are color-mix derivations of that one resolved color. */
    --lm-button-main: var(--lm-main-color, #2563eb);
    --lm-button-deep: color-mix(in srgb, var(--lm-button-main) 86%, #000);
    --lm-button-tint: color-mix(in srgb, var(--lm-button-main) 10%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lm-space-2, 8px);
    box-sizing: border-box;
    margin: 0;
    padding: var(--lm-space-2, 8px) var(--lm-space-4, 16px);
    border: 1px solid transparent;
    border-radius: var(--lm-radius, 6px);
    background: var(--lm-button-main);
    color: #fff;
    font: 500 14px/1.45 system-ui, sans-serif;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        background var(--lm-duration, 0.15s) var(--lm-ease, ease),
        border-color var(--lm-duration, 0.15s) var(--lm-ease, ease),
        box-shadow var(--lm-duration, 0.15s) var(--lm-ease, ease);
}

/* Color palette (primary is the default) — mapped onto the shared semantics */
.lm-button[data-color='secondary'] {
    --lm-button-main: var(--lm-neutral-9, #8b8d98);
}

.lm-button[data-color='success'] {
    --lm-button-main: var(--lm-color-success, #16a34a);
}

.lm-button[data-color='error'] {
    --lm-button-main: var(--lm-color-danger, #dc2626);
}

.lm-button[data-color='warning'] {
    --lm-button-main: var(--lm-color-warning, #d97706);
}

/* Contained (default variant) interaction states */
.lm-button:hover:not(:disabled):not(.lm-button-disabled) {
    background: var(--lm-button-deep);
}

.lm-button:active:not(:disabled):not(.lm-button-disabled) {
    background: var(--lm-button-deep);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18);
}

/* Outlined */
.lm-button[data-variant='outlined'] {
    background: transparent;
    border-color: var(--lm-button-main);
    color: var(--lm-button-main);
}

.lm-button[data-variant='outlined']:hover:not(:disabled):not(.lm-button-disabled) {
    background: var(--lm-button-tint);
    border-color: var(--lm-button-deep);
}

.lm-button[data-variant='outlined']:active:not(:disabled):not(.lm-button-disabled) {
    background: var(--lm-button-tint);
    box-shadow: none;
}

/* Text */
.lm-button[data-variant='text'] {
    background: transparent;
    border-color: transparent;
    color: var(--lm-button-main);
}

.lm-button[data-variant='text']:hover:not(:disabled):not(.lm-button-disabled) {
    background: var(--lm-button-tint);
    border-color: transparent;
}

.lm-button[data-variant='text']:active:not(:disabled):not(.lm-button-disabled) {
    background: var(--lm-button-tint);
    box-shadow: none;
}

/* Sizes */
.lm-button[data-size='small'] {
    padding: 5px var(--lm-space-3, 12px);
    font-size: 13px;
}

.lm-button[data-size='large'] {
    padding: 11px var(--lm-space-5, 24px);
    font-size: 15px;
}

/* Full width */
.lm-button.lm-button-fullwidth {
    display: flex;
    width: 100%;
}

/* Disabled / loading */
.lm-button:disabled,
.lm-button.lm-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Icon */
.lm-button .lm-button-icon {
    font-size: 18px;
    line-height: 1;
}

.lm-button[data-size='small'] .lm-button-icon {
    font-size: 16px;
}

.lm-button[data-size='large'] .lm-button-icon {
    font-size: 20px;
}

/* Spinner (replaces the content while loading) */
.lm-button .lm-button-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: lm-button-spin 0.7s linear infinite;
}

@keyframes lm-button-spin {
    to {
        transform: rotate(360deg);
    }
}