/*
 * Buttons: .btn + a style + a look (.btn--solid | .btn--outline | .btn--text). On dark
 * backgrounds (.is-dark) each switches to its light version automatically. Sizes:
 * .btn--xs, .btn--sm, .btn--lg, .btn--xl (below). Styles, by the colour roles (tokens.css):
 *   .btn--primary    blush (a step darker than --color-action, the other chosen / active UI)
 *   .btn--secondary  plum
 *   .btn--accent     gold
 *   .btn--neutral    black on light backgrounds, white on dark ones
 *
 * The colours are variables, set per style and look, so a block can re-point them.
 */

.btn {
    --btn-text: var(--white);
    --btn-bg: var(--primary-700);
    --btn-border: transparent;
    --btn-text-hover: var(--btn-text);
    --btn-bg-hover: var(--primary-600);
    --btn-border-hover: var(--btn-border);
    --btn-bg-active: var(--primary-700);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    width: fit-content;
    min-width: 80px;
    min-height: 40px;
    padding: 4px 20px;
    border: 2px solid var(--btn-border);   /* outlines show it; solid buttons keep it transparent, so both are the same size */
    border-radius: var(--pill);
    background: var(--btn-bg);
    color: var(--btn-text);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: .02em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out;
}

.btn:hover {
    background: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
    color: var(--btn-text-hover);
}

.btn:active {
    background: var(--btn-bg-active, var(--btn-bg-hover));
}

.btn:focus-visible {
    outline: 2px solid var(--btn-focus, var(--tertiary-600));
    outline-offset: 2px;
}

/* Sizes: .btn--xs, .btn--sm, (the default), .btn--lg, .btn--xl, 4px apart in height (32–48px).
   Text links have their own sizes (after .btn--text below). */
.btn--xs {
    gap: 6px;
    min-width: 64px;
    min-height: 32px;
    padding: 2px 12px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .03em;
}

.btn--sm {
    gap: 7px;
    min-width: 72px;
    min-height: 36px;
    padding: 4px 16px;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: .03em;
}

.btn--lg {
    gap: 8px;
    min-width: 88px;
    min-height: 44px;
    padding: 4px 24px;
    font-size: 14px;
}

.btn--xl {
    gap: 10px;
    min-width: 96px;
    min-height: 48px;
    padding: 6px 28px;
    font-size: 15px;
}

.btn[disabled],
.btn.is-disabled {
    --btn-text: var(--neutral-400);
    --btn-bg: var(--neutral-200);
    --btn-border: transparent;
    pointer-events: none;
}

/* ---------- Light backgrounds ---------- */

.btn--primary.btn--outline {
    --btn-text: var(--primary-800);
    --btn-text-hover: var(--primary-900);
    --btn-bg: transparent;
    --btn-border: var(--primary-700);
    --btn-border-hover: var(--primary-800);
    --btn-bg-hover: color-mix(in srgb, var(--primary-300) 22%, transparent);
    --btn-bg-active: color-mix(in srgb, var(--primary-300) 34%, transparent);
}

.btn--neutral.btn--solid {
    --btn-text: var(--white);
    --btn-bg: var(--black);
    --btn-bg-hover: var(--neutral-800);
    --btn-bg-active: var(--neutral-900);
}

.btn--neutral.btn--outline {
    --btn-text: var(--neutral-900);
    --btn-bg: color-mix(in srgb, var(--neutral-50) 6%, transparent);
    --btn-border: var(--neutral-900);
    --btn-bg-hover: color-mix(in srgb, var(--tertiary-900) 10%, transparent);
    --btn-bg-active: color-mix(in srgb, var(--tertiary-900) 15%, transparent);
}

/* Text link with an arrow */
.btn--text {
    --btn-text: var(--neutral-800);
    --btn-text-hover: var(--tertiary-600);
    --btn-bg: transparent;
    --btn-bg-hover: transparent;
    --btn-bg-active: transparent;
    --btn-border: transparent;
    min-width: 0;
    min-height: 0;
    padding: 0 0 2px;
    border: 0;
    border-radius: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: .28px;
}

.btn--text::after {
    content: '';
    width: .93em;     /* 13 × 11px at the default 14px, growing with the text size */
    height: .79em;
    margin-left: -3px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11'%3E%3Cpath d='M7.6 0 13 5.5 7.6 11l-.8-.8 4.1-4.1H0V4.9h10.9L6.8.8z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11'%3E%3Cpath d='M7.6 0 13 5.5 7.6 11l-.8-.8 4.1-4.1H0V4.9h10.9L6.8.8z'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .2s ease-in-out;
}

.btn--text:hover::after {
    transform: translateX(3px);
}

/* Text link sizes: the text (and its arrow) only */
.btn--text.btn--xs { font-size: 12px; line-height: 18px; }
.btn--text.btn--sm { font-size: 13px; line-height: 20px; }
.btn--text.btn--lg { font-size: 15px; line-height: 24px; }
.btn--text.btn--xl { font-size: 16px; line-height: 26px; }

.btn--neutral.btn--text {
    --btn-text: var(--neutral-900);
    --btn-text-hover: var(--neutral-700);
}

/* ---------- Dark backgrounds ----------
   Solid buttons: the colour styles all use step 700 of their scale. On light backgrounds
   they lighten on hover (600) and settle back when pressed (700); on dark ones they deepen
   on hover (800) and when pressed (900). White text stays at 4.5:1 or more throughout.
   Outline buttons: the border is step 700 on every background too, with dark text (800)
   on light backgrounds and light text (100) on dark ones. On hover the border moves away
   from the background (800 on light, 600 on dark) and a soft tint fills the button. */

.is-dark .btn--primary.btn--solid {
    --btn-bg: var(--primary-700);
    --btn-bg-hover: var(--primary-800);
    --btn-bg-active: var(--primary-900);
}

.is-dark .btn--primary.btn--outline {
    --btn-text: var(--primary-100);
    --btn-text-hover: var(--primary-50);
    --btn-bg: transparent;
    --btn-border: var(--primary-700);
    --btn-border-hover: var(--primary-600);
    --btn-bg-hover: color-mix(in srgb, var(--primary-500) 25%, transparent);
    --btn-bg-active: color-mix(in srgb, var(--primary-500) 35%, transparent);
}

.is-dark .btn--neutral.btn--solid {
    --btn-text: var(--neutral-900);
    --btn-bg: var(--white);
    --btn-bg-hover: var(--neutral-300);
    --btn-bg-active: var(--neutral-300);
    --btn-focus: var(--white);
}

.is-dark .btn--neutral.btn--outline {
    --btn-text: var(--white);
    --btn-bg: color-mix(in srgb, var(--neutral-50) 6%, transparent);
    --btn-border: var(--white);
    --btn-bg-hover: color-mix(in srgb, var(--neutral-50) 10%, transparent);
    --btn-bg-active: color-mix(in srgb, var(--neutral-50) 7%, transparent);
    --btn-focus: var(--white);
}

.is-dark .btn--text {
    --btn-text: var(--neutral-200);
    --btn-text-hover: var(--white);
}

/* A light area inside a dark one (a light card in a dark section, the style guide's
   "on light backgrounds" panel): back to the light-background buttons. These repeat the
   values under "Light backgrounds" above, so change them together. */
.is-dark .is-light .btn--primary.btn--outline {
    --btn-text: var(--primary-800);
    --btn-text-hover: var(--primary-900);
    --btn-bg: transparent;
    --btn-border: var(--primary-700);
    --btn-border-hover: var(--primary-800);
    --btn-bg-hover: color-mix(in srgb, var(--primary-300) 22%, transparent);
    --btn-bg-active: color-mix(in srgb, var(--primary-300) 34%, transparent);
}

.is-dark .is-light .btn--neutral.btn--solid {
    --btn-text: var(--white);
    --btn-bg: var(--black);
    --btn-bg-hover: var(--neutral-800);
    --btn-bg-active: var(--neutral-900);
    --btn-focus: var(--tertiary-600);
}

.is-dark .is-light .btn--neutral.btn--outline {
    --btn-text: var(--neutral-900);
    --btn-bg: color-mix(in srgb, var(--neutral-50) 6%, transparent);
    --btn-border: var(--neutral-900);
    --btn-bg-hover: color-mix(in srgb, var(--tertiary-900) 10%, transparent);
    --btn-bg-active: color-mix(in srgb, var(--tertiary-900) 15%, transparent);
    --btn-focus: var(--tertiary-600);
}

.is-dark .is-light .btn--text {
    --btn-text: var(--neutral-800);
    --btn-text-hover: var(--tertiary-600);
}

.is-dark .is-light .btn--neutral.btn--text {
    --btn-text: var(--neutral-900);
    --btn-text-hover: var(--neutral-700);
}

.is-dark .is-light .btn--primary.btn--solid {
    --btn-bg: var(--primary-700);
    --btn-bg-hover: var(--primary-600);
    --btn-bg-active: var(--primary-700);
}

.is-dark .is-light .btn--secondary.btn--solid {
    --btn-bg: var(--secondary-700);
    --btn-bg-hover: var(--secondary-600);
    --btn-bg-active: var(--secondary-700);
}

.is-dark .is-light .btn--accent.btn--solid {
    --btn-bg: var(--tertiary-700);
    --btn-bg-hover: var(--tertiary-600);
    --btn-bg-active: var(--tertiary-700);
}

.is-dark .is-light .btn--secondary.btn--outline {
    --btn-text: var(--secondary-800);
    --btn-text-hover: var(--secondary-900);
    --btn-border: var(--secondary-700);
    --btn-border-hover: var(--secondary-800);
    --btn-bg-hover: color-mix(in srgb, var(--secondary-300) 22%, transparent);
    --btn-bg-active: color-mix(in srgb, var(--secondary-300) 34%, transparent);
    --btn-focus: var(--tertiary-600);
}

.is-dark .is-light .btn--secondary.btn--text {
    --btn-text: var(--secondary-700);
    --btn-text-hover: var(--secondary-800);
    --btn-focus: var(--tertiary-600);
}

.is-dark .is-light .btn--accent.btn--outline {
    --btn-text: var(--tertiary-800);
    --btn-text-hover: var(--tertiary-900);
    --btn-border: var(--tertiary-700);
    --btn-border-hover: var(--tertiary-800);
    --btn-bg-hover: color-mix(in srgb, var(--tertiary-200) 25%, transparent);
    --btn-bg-active: color-mix(in srgb, var(--tertiary-200) 38%, transparent);
    --btn-focus: var(--tertiary-600);
}

.is-dark .is-light .btn--accent.btn--text {
    --btn-text: var(--tertiary-600);
    --btn-text-hover: var(--tertiary-800);
    --btn-focus: var(--tertiary-600);
}

/* A row of buttons */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--step-4);
}

/* ---------- Secondary: plum ---------- */

.btn--secondary.btn--solid {
    --btn-text: var(--white);
    --btn-bg: var(--secondary-700);
    --btn-bg-hover: var(--secondary-600);
    --btn-bg-active: var(--secondary-700);
}

.btn--secondary.btn--outline {
    --btn-text: var(--secondary-800);
    --btn-text-hover: var(--secondary-900);
    --btn-bg: transparent;
    --btn-border: var(--secondary-700);
    --btn-border-hover: var(--secondary-800);
    --btn-bg-hover: color-mix(in srgb, var(--secondary-300) 22%, transparent);
    --btn-bg-active: color-mix(in srgb, var(--secondary-300) 34%, transparent);
}

.btn--secondary.btn--text {
    --btn-text: var(--secondary-700);
    --btn-text-hover: var(--secondary-800);
}

.is-dark .btn--secondary.btn--solid {
    --btn-bg: var(--secondary-700);
    --btn-bg-hover: var(--secondary-800);
    --btn-bg-active: var(--secondary-900);
    --btn-focus: var(--secondary-200);
}

.is-dark .btn--secondary.btn--outline {
    --btn-text: var(--secondary-100);
    --btn-text-hover: var(--secondary-50);
    --btn-border: var(--secondary-700);
    --btn-border-hover: var(--secondary-600);
    --btn-bg-hover: color-mix(in srgb, var(--secondary-500) 25%, transparent);
    --btn-bg-active: color-mix(in srgb, var(--secondary-500) 35%, transparent);
    --btn-focus: var(--secondary-200);
}

.is-dark .btn--secondary.btn--text {
    --btn-text: var(--secondary-100);
    --btn-text-hover: var(--secondary-50);
    --btn-focus: var(--secondary-200);
}

/* ---------- Accent: gold ---------- */

.btn--accent.btn--solid {
    --btn-text: var(--white);
    --btn-bg: var(--tertiary-700);
    --btn-bg-hover: var(--tertiary-600);
    --btn-bg-active: var(--tertiary-700);
}

.btn--accent.btn--outline {
    --btn-text: var(--tertiary-800);
    --btn-text-hover: var(--tertiary-900);
    --btn-bg: transparent;
    --btn-border: var(--tertiary-700);
    --btn-border-hover: var(--tertiary-800);
    --btn-bg-hover: color-mix(in srgb, var(--tertiary-200) 25%, transparent);
    --btn-bg-active: color-mix(in srgb, var(--tertiary-200) 38%, transparent);
}

.btn--accent.btn--text {
    --btn-text: var(--tertiary-600);
    --btn-text-hover: var(--tertiary-800);
}

.is-dark .btn--accent.btn--solid {
    --btn-text: var(--white);
    --btn-bg: var(--tertiary-700);
    --btn-bg-hover: var(--tertiary-800);
    --btn-bg-active: var(--tertiary-900);
    --btn-focus: var(--tertiary-200);
}

.is-dark .btn--accent.btn--outline {
    --btn-text: var(--tertiary-100);
    --btn-text-hover: var(--tertiary-50);
    --btn-border: var(--tertiary-700);
    --btn-border-hover: var(--tertiary-600);
    --btn-bg-hover: color-mix(in srgb, var(--tertiary-300) 22%, transparent);
    --btn-bg-active: color-mix(in srgb, var(--tertiary-300) 32%, transparent);
    --btn-focus: var(--tertiary-200);
}

.is-dark .btn--accent.btn--text {
    --btn-text: var(--tertiary-100);
    --btn-text-hover: var(--tertiary-50);
    --btn-focus: var(--tertiary-200);
}