/*
 * Action colours of the site interface (public site, editor, order page, client area).
 * Loaded last, after site.css, identity.css and luxe.css: buttons that act are gold with dark text; green stays for
 * structure (titles, links, header, dark sections, the Premium card). Colours come from the --color-action-* variables
 * of site.css, never from literals here. Invitations (themes) do not load this file.
 *
 * Rules: never white text on gold; primary = gold fill; secondary = transparent with a dark-gold border and text;
 * risky actions (.button--danger) stay red; keyboard focus is a 2 px green ring 2 px away (light on dark sections).
 */

/* ---------- primary ---------- */
.button {
    border: 0;
    background: var(--color-action);
    color: var(--color-action-text);
    box-shadow: 0 1px 2px rgb(0 0 0 / 16%);
    filter: none;
}

.button:hover,
.button:active {
    background: var(--color-action-hover);
    color: var(--color-action-text);
    box-shadow: 0 1px 2px rgb(0 0 0 / 22%);
    filter: none;
}

/* ---------- secondary ---------- */
.button--secondary {
    border: 1px solid var(--color-action-outline);
    background: transparent;
    color: var(--color-action-outline-text);
    box-shadow: none;
}

.button--secondary:hover,
.button--secondary:active {
    background: color-mix(in srgb, var(--color-action) 22%, transparent);
    color: var(--color-action-outline-text);
    box-shadow: none;
}

/* ---------- risky actions stay red, white text on red ---------- */
.button.button--danger {
    border: 0;
    background: var(--color-danger);
    color: #fff;
    box-shadow: none;
}

.button.button--danger:hover,
.button.button--danger:active {
    background: #7f1d1d;
    color: #fff;
}

/* ---------- keyboard focus ---------- */
.button:focus-visible,
.link-button:focus-visible {
    outline: 2px solid var(--color-action-focus);
    outline-offset: 2px;
}

.land-rsvp .button:focus-visible,
.land-final .button:focus-visible,
.plan-card--featured .button:focus-visible,
.site-footer .button:focus-visible {
    outline-color: var(--color-action-focus-on-dark);
}

/* ---------- on the dark green sections ---------- */
.land-rsvp .button--secondary,
.land-final .button--secondary,
.plan-card--featured .button--secondary,
.site-footer .button--secondary {
    border-color: var(--color-action);
    color: var(--color-action);
}

/* ---------- disabled (declared last: it wins over every state above) ---------- */
.button:disabled,
.button[disabled],
.button[aria-disabled="true"] {
    border: 0;
    background: var(--color-action-disabled);
    color: var(--color-action-disabled-text);
    box-shadow: none;
    cursor: not-allowed;
}