/* One green primary per view. Square-ish corners at 4px.
   Minimum 48px tall — every button is a tap target. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: var(--tap-min);
    padding: 15px 26px;
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    border: 1.5px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn-lg {
    font-size: var(--font-size-body);
    padding: 17px 28px;
}

.btn-sm {
    min-height: 40px;
    padding: 10px 16px;
    font-size: var(--font-size-sm);
}

/* Primary actions on charcoal */
.btn-primary {
    background-color: var(--green-bright);
    color: var(--ink);
    border-color: var(--green-bright);
}

.btn-primary:hover {
    background-color: var(--green-pale);
    border-color: var(--green-pale);
    color: var(--ink);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text);
    border-color: var(--line-strong);
}

.btn-secondary:hover {
    background-color: var(--card);
    color: var(--text);
}

.btn-ghost {
    background-color: transparent;
    color: var(--green-deep);
    border-color: transparent;
    padding-inline: 4px;
}

.btn-ghost:hover {
    color: var(--green-bright);
}

.btn-wash {
    background-color: var(--green-wash);
    color: var(--green-deep);
    border-color: var(--green-wash-line);
}

.btn-wash:hover {
    background-color: var(--green-wash-hover);
    color: var(--green-deep);
}

/* On ink — green lifts to --green-bright for contrast */
.btn-on-ink {
    background-color: var(--green-bright);
    color: var(--ink);
    border-color: var(--green-bright);
}

.btn-on-ink:hover {
    background-color: var(--green-pale);
    border-color: var(--green-pale);
    color: var(--ink);
}

.btn-on-ink-outline {
    background-color: transparent;
    color: var(--on-ink);
    border-color: #4A4D47;
}

.btn-on-ink-outline:hover {
    border-color: var(--on-ink);
    color: var(--on-ink);
}

/* On the red emergency band */
.btn-on-red {
    background-color: #fff;
    color: var(--red);
    border-color: #fff;
    font-weight: 700;
}

.btn-on-red:hover {
    background-color: #F6F5F2;
    color: var(--red);
}

.btn-block {
    width: 100%;
}