/*
  Actions.

  Two families, deliberately:
    .button        — pill-shaped, generous touch target. Friendly and confident; this is the
                     playful half of Ceramigeek and it carries every purchase and navigation action.
    .link-action   — an underlined text action with a red rule. The editorial half; used inside
                     stories, section heads and product facts where a filled pill would shout.

  Red is the primary action colour everywhere. Black is the secondary. Nothing else fills.
*/

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-block-size: 3rem;
    padding: var(--space-sm) var(--space-xl);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    font-family: var(--font-body);
    font-stretch: var(--stretch-label);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* --mx / --my: the magnetic pull, set by interactions.js on fine pointers only. */
    transform: translate(var(--mx, 0px), var(--my, 0px));
    transition: background-color var(--transition-base), border-color var(--transition-base),
        color var(--transition-base), box-shadow var(--transition-base),
        transform var(--duration-slow) var(--ease-out);
}

/* A glaze highlight that crosses the button on hover — light running over a glossy surface. */
.button--primary::before,
.button--secondary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.28) 48%, transparent 64%);
    transform: translateX(-120%);
    transition: transform 0ms;
    pointer-events: none;
}

.button--primary:hover::before,
.button--secondary:hover::before {
    transform: translateX(120%);
    transition: transform 900ms var(--ease-out);
}

.button:active { transform: translate(var(--mx, 0px), calc(var(--my, 0px) + 1px)); }

.button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.button[aria-disabled="true"],
.button:disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* ---- Variants on the paper ground ----------------------------------------- */
.button--primary {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    border-color: var(--color-accent);
}

.button--primary:hover {
    background-color: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    box-shadow: var(--shadow-accent);
}

.button--secondary {
    background-color: var(--cg-black);
    color: var(--cg-white);
    border-color: var(--cg-black);
}

.button--secondary:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.button--ghost {
    background-color: transparent;
    border-color: var(--color-ink-strong);
    color: var(--color-ink-strong);
}

.button--ghost:hover {
    background-color: var(--color-ink-strong);
    color: var(--cg-white);
}

.button--danger {
    background-color: var(--color-danger);
    color: var(--cg-white);
    border-color: var(--color-danger);
}

.button--danger:hover { background-color: color-mix(in srgb, var(--color-danger) 84%, black); }

/* Tertiary text action kept in the .button family for markup consistency. */
.button--link {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-accent);
    padding-inline: var(--space-sm);
    min-block-size: 2.75rem;
}

.button--link:hover {
    color: var(--color-accent-strong);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

/* ---- Variants on the ink ground ------------------------------------------- */
.button--on-deep.button--primary {
    background-color: var(--cg-red);
    border-color: var(--cg-red);
    color: var(--cg-white);
}

.button--on-deep.button--primary:hover {
    background-color: var(--cg-red-on-dark);
    border-color: var(--cg-red-on-dark);
    color: var(--cg-black);
    box-shadow: 0 12px 38px -8px var(--kiln-glow);
}

@media (prefers-reduced-motion: reduce) {
    .button { transform: none; }
    .button--primary::before,
    .button--secondary::before { display: none; }
}

.button--on-deep.button--secondary,
.button--on-deep.button--ghost {
    background-color: transparent;
    border-color: var(--color-on-deep);
    color: var(--color-on-deep);
}

.button--on-deep.button--secondary:hover,
.button--on-deep.button--ghost:hover {
    background-color: var(--color-on-deep);
    color: var(--cg-black);
}

.button--on-deep.button--link { color: var(--color-accent-on-deep); }

/* ---- Sizes ---------------------------------------------------------------- */
.button--small {
    min-block-size: 2.5rem;
    padding: var(--space-2xs) var(--space-lg);
    font-size: var(--text-xs);
}

.button--large {
    min-block-size: 3.5rem;
    padding: var(--space-md) var(--space-2xl);
    font-size: var(--text-base);
}

.button--block {
    display: flex;
    inline-size: 100%;
}

/* ---- Editorial text action -------------------------------------------------
   An underlined link whose rule is red and slides on hover. Used for "See all", "Read the story",
   "Back to store" — actions that belong to the prose, not to the purchase flow. */
.link-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    position: relative;
    padding-block: var(--space-2xs);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-strong);
    transition: color var(--transition-fast);
}

.link-action::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 2px;
    background: var(--color-accent);
    transform-origin: left center;
    transition: transform var(--transition-base);
}

.link-action:hover { color: var(--color-accent); }
.link-action:hover::after { transform: scaleX(1.06); }

.link-action__arrow { transition: transform var(--transition-base); }
.link-action:hover .link-action__arrow { transform: translateX(3px); }

.on-ink .link-action { color: var(--color-on-deep-strong); }
.on-ink .link-action::after { background: var(--color-accent-on-deep); }
.on-ink .link-action:hover { color: var(--color-accent-on-deep); }

/* ---- Action rows ---------------------------------------------------------- */
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

.actions--spread { justify-content: space-between; }
.actions--center { justify-content: center; }

/*
  Compatibility shim: a handful of legacy auth/contact views used a parallel `.btn` vocabulary.
  Those views are rebuilt on `.button`; this shim only guarantees that any stray markup still renders
  as a real button rather than as unstyled text. Do not add new `.btn` markup.
*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-block-size: 3rem;
    padding: var(--space-sm) var(--space-xl);
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-accent);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.btn--secondary {
    background: transparent;
    border-color: var(--color-ink-strong);
    color: var(--color-ink-strong);
}

.btn--block { inline-size: 100%; }