/* ============================================================
   Dispatch — ui.css
   Shared control primitives: the .btn family.
   One canonical definition for what was previously copy-pasted
   into ~10 scoped .razor.css files and drifting apart (heights
   38-46px, three focus styles, #fff vs --on-signal ink).
   Scoped page rules outrank these (isolation attribute adds
   specificity), so pages keep layout-only overrides — width,
   margins — in their own .razor.css.
   ============================================================ */

/* ---- Base -------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 1.25rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--r-control);
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s ease, background-color 0.15s ease,
                border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

/* ---- Primary (coral signal CTA) ---------------------------- */

.btn.primary.signal {
    background-color: var(--signal);
    color: var(--on-signal);
}

.btn.primary.signal:hover:not(:disabled) { opacity: 0.88; }
.btn.primary.signal:active:not(:disabled) { transform: scale(0.985); }

.btn.primary.signal:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 20%, transparent);
}

/* ---- Ghost / secondary (bordered, transparent) -------------- */

.btn.ghost,
.btn.secondary {
    background: transparent;
    color: var(--fg-1);
    border: 1px solid var(--border);
}

.btn.ghost:hover:not(:disabled),
.btn.secondary:hover:not(:disabled) {
    background: var(--surface-hover);
    color: var(--fg-0);
}

/* ---- Quiet (surface-toned; 404/error pages) ----------------- */

.btn.quiet {
    background-color: var(--bg-1);
    color: var(--fg-0);
    border: 1px solid var(--border-input);
}

.btn.quiet:hover:not(:disabled) {
    background-color: var(--surface-hover);
    border-color: var(--fg-1);
}

/* ---- Danger (destructive actions) --------------------------- */

.btn.danger {
    background: var(--err);
    color: var(--on-signal);
}

.btn.danger:hover:not(:disabled) { opacity: 0.88; }

.btn.danger:focus-visible {
    outline: 2px solid var(--err);
    outline-offset: 3px;
}

/* ---- Mobile -------------------------------------------------- */

@media (max-width: 640px) {
    .btn {
        min-height: 44px;
    }
}