/* Shared <button> styles. Loaded at document level (index.html) for the modal
   overlays appended to document.body, and @imported by shadow-DOM components so
   every button looks the same. The form's submit button is the primary action and
   gets the accent treatment; other buttons stay neutral. */

button {
    margin: 0;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-label-color, #334155);
    background: var(--surface-color, #ffffff);
    border: 1px solid var(--input-border-color, #cbd5e1);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

button:hover {
    background: var(--surface-muted-color, #f1f5f9);
    border-color: var(--text-muted-color, #94a3b8);
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Blue is the page's PRIMARY action — the thing you most likely came here to
   do (Send, Vote, Scan, Support). A neutral button is a secondary choice
   beside it (Review, Cancel). A form's submit button is primary by
   definition, and .primary-button says the same for the type="button" actions
   that are a page's main verb without submitting a form. One source of truth;
   a few components (.vote-button, .authenticate-scan-button,
   .submit-citizenship-button) still carry their own copy of this exact accent
   from before it existed and render identically. */
button[type="submit"],
.primary-button {
    color: #ffffff;
    background: #3b82f6;
    border-color: #3b82f6;
}

button[type="submit"]:hover:not(:disabled),
.primary-button:hover:not(:disabled) {
    background: #2563eb;
    border-color: #2563eb;
}

/* An icon-button's black line-art is inverted to white on the blue fill. */
.primary-button.icon-button img {
    filter: invert(1);
}

button[data-destructive] {
    color: #ffffff;
    background: #dc2626;
    border-color: #dc2626;
}

button[data-destructive]:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

/* A button pairing a black line-art icon with its label: Show/Scan on the
   certification page, Scan/Send on the Misthos send page. The artwork is
   inverted to white on dark backgrounds via --icon-filter (base.css). */
.icon-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.icon-button img {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    filter: var(--icon-filter, none);
}