/* Button system — five colour levels in three sizes.
 *
 * Replaces a base class that declared min-height: 52px and then shipped at
 * 47-48px because thirteen separate contexts overrode it. Size and width are
 * now explicit choices rather than something each screen patches in:
 *
 *     class="btn btn-primary btn-block"      full-width primary, default size
 *     class="btn btn-secondary btn-sm"       compact affirmative
 *
 * Levels are single classes, not compounds. .btn.secondary was two classes, so
 * a single-class component override silently lost to it — a bug this codebase
 * hit more than once.
 *
 * Every size clears the 44px touch minimum by construction, so no context ever
 * needs to reach in and set a height again. */

/* ── base ─────────────────────────────────────────────────────────────── */
.btn {
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    border-radius: var(--radius-chip);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    text-decoration: none;
    /* medium — the default, so most buttons carry no size class */
    min-height: 48px;
    padding: 0 20px;
    transition: filter 0.15s ease, transform 0.1s ease;
}

/* .btn sets display, which outranks the UA stylesheet's [hidden] rule, so a
 * hidden button still painted. Three components had each patched around this
 * separately; one rule at the base retires all of them. */
.btn[hidden] {
    display: none;
}

.btn:hover { filter: brightness(1.08); }

/* Lightening a solid dark fill washes it out and lowers contrast, so the
 * dark-filled levels darken on hover instead of brightening. */
.btn-primary:hover,
.btn-dark:hover { filter: brightness(0.92); }
.btn:active { transform: scale(0.98); }

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

.btn:disabled:active {
    transform: none;
}

/* ── sizes ────────────────────────────────────────────────────────────── */
/* One type size across all three. Differentiating by height and padding keeps
 * the label legible and the contrast ratios constant — a 14px small button
 * would have needed its own colour audit. */
.btn-lg {
    min-height: 56px;
    padding: 0 26px;
}

.btn-sm {
    min-height: 44px;
    padding: 0 16px;
}

/* ── width ────────────────────────────────────────────────────────────── */
/* A button hugs its label by default; .btn-block fills its container. That is
 * what lets one system serve the app's 375-460px shell and the marketing
 * site's desktop widths without a second base class. */
.btn-block {
    width: 100%;
}

/* ── colour ───────────────────────────────────────────────────────────── */

/* 1 — primary. The one thing a surface wants; never two on a screen.
 *
 * Solid --accent-2, not the old --accent-light -> --accent-2 gradient. The
 * gradient's light stop carried white at 1.97:1; dropping it lifts the worst
 * case to 3.42:1 — the single biggest contrast gain available without changing
 * the brand orange, which was ruled out on look.
 *
 * 17px, so the label reads with the weight a primary CTA deserves at this fill.
 * Noted for whoever audits this: 3.42:1 clears the 3.0 that WCAG asks of LARGE
 * text, but large text starts at 18.66px/700 and this is 17px, so the 4.5:1
 * rule still applies and this does not meet it. A deliberate decision, 1.66px
 * from compliance. Raising the label to 18.66px would pass it outright with no
 * colour change at all. */
.btn-primary {
    background: var(--accent-2);
    color: var(--text-on-accent);
    font-size: 17px;
}

/* 2 — secondary. Affirmative, but not the main CTA: Share, Save.
 * Share is always this level — the one rule that makes "share" recognisable
 * before the label is read. --accent-strong rather than --accent-2 for the
 * label: same fill, but 4.55:1 instead of 2.74:1. */
.btn-secondary {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

/* The base :hover brightens, which is wrong for a pale tint: brightness()
 * multiplies every channel, so red clips at 255 while green and blue keep
 * climbing and the hue slides to yellow. --accent-soft went to rgb(251 230 213)
 * and hovered to rgb(255 248 230) - cream, not orange. Step the tint further
 * toward the accent instead (16% -> 26% over the same ground), and cancel the
 * inherited filter or it would brighten this value too.
 *
 * Same specificity as .btn:hover, so this has to stay below it in the file. */
.btn-secondary:hover {
    background: rgb(248 217 193);
    filter: none;
}

/* 3 — dark. Solid teal. On a destructive dialog it lets the safe action carry
 * the weight while the destructive one stays recessive. */
.btn-dark {
    background: var(--fill-dark);
    color: var(--text-on-accent);
}

/* 4 — dark-secondary. The quiet companion: Cancel, Back, Copy, Got it.
 * --text-primary rather than --text-soft takes it from 4.07:1 to 7.38:1 at no
 * visual cost worth naming. */
.btn-dark-secondary {
    background: var(--fill-quiet);
    color: var(--text-primary);
}

/* 5 — white. Anything sitting on the dark teal hero, where the accent family
 * cannot go: --accent-soft over that ground measures 2.32:1. White is not a
 * stylistic preference here, it is the only treatment that clears AA. */
.btn-white {
    background: #fff;
    color: var(--text-primary);
}

/* 6 — danger. Tinted rather than solid red: a delete button should read as
 * serious, not as an alarm going off. --error-strong for the label, 4.52:1. */
.btn-danger {
    /* --error / --bg-surface / --error-strong are app-theme tokens: the
     * marketing site has no destructive actions and never loads them. Fallbacks
     * so a shared stylesheet can never resolve to nothing. */
    background: color-mix(in srgb, var(--error, #C9443A) 18%, var(--bg-surface, #fff));
    color: var(--error-strong, #AC3A32);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error, #C9443A) 35%, transparent);
}