/* Hidden Roots – Buttons
   .button-primary – moss, white text; a sheen sweeps across on hover
   .button-ghost   – hairline outline, fills on hover
   .button-link    – text with an arrow that steps forward on hover
   .on-dark switches each to its light version. */

.button {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    padding:         16px 30px;
    border:          1px solid transparent;
    border-radius:   var(--radius-pill);
    overflow:        hidden;
    font:            var(--text-14mm);
    letter-spacing:  0.06em;
    text-decoration: none;
    cursor:          pointer;
    isolation:       isolate;
    transition:      color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);

    &:active {
        transform: translateY(1px);
    }

    svg {
        width:      16px;
        height:     16px;
        transition: transform var(--transition-base);
    }

    &:hover svg {
        transform: translateX(4px);
    }
}

.button-primary {
    color:      var(--color-white);
    background: var(--color-moss);
    box-shadow: var(--shadow-soft);

    /* the sheen */
    &::after {
        content:    '';
        position:   absolute;
        inset:      0;
        z-index:    -1;
        background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 22%) 50%, transparent 70%);
        transform:  translateX(-110%);
        transition: transform .8s var(--ease-out);
    }

    &:hover,
    &:focus-visible {
        color:      var(--color-white);
        background: var(--color-forest);
        box-shadow: var(--shadow-lift);

        &::after {
            transform: translateX(110%);
        }
    }

    .on-dark & {
        color:      var(--color-bark);
        background: var(--color-sage);

        &:hover,
        &:focus-visible {
            color:      var(--color-bark);
            background: var(--color-paper);
        }
    }
}

.button-ghost {
    color:        var(--color-bark);
    border-color: var(--color-bark-12);

    &:hover,
    &:focus-visible {
        color:        var(--color-paper);
        background:   var(--color-bark);
        border-color: var(--color-bark);
    }

    .on-dark & {
        color:        var(--color-paper);
        border-color: var(--color-paper-16);

        &:hover,
        &:focus-visible {
            color:        var(--color-bark);
            background:   var(--color-paper);
            border-color: var(--color-paper);
        }
    }
}

.button-link {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    font:            var(--text-14mm);
    letter-spacing:  0.06em;
    color:           var(--color-moss);
    text-decoration: none;

    svg {
        width:      16px;
        height:     16px;
        transition: transform var(--transition-base);
    }

    &:hover svg {
        transform: translateX(5px);
    }

    .on-dark & {
        color: var(--color-sage);
    }
}

.button-group {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         12px var(--space-md);
}

@media (prefers-reduced-motion: reduce) {
    .button,
    .button::after,
    .button svg {
        transition: none;
    }
}