/* Button — atom. Spec: component-specs/button.md */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-family-sans);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    position: relative;   /* the glass rim (::after) sits inside the pill */
    transition:
        background-color 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        filter 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.button:active {
    transform: scale(0.97);
}

/* Sizes */
.button-small {
    height: 32px;
    padding-inline: 12px;
    gap: 8px;
    font-size: var(--text-mini-size);
}

.button-medium {
    height: 40px;
    padding-inline: 14px;
    gap: 8px;
    font-size: var(--text-mini-size);
}

.button-large {
    height: 44px;
    padding-inline: 20px;
    gap: 6px;
    font-size: 16px;
}

/* Variants */
/* Primary and secondary follow the homepage in dark and the Althea product
 * in light (Ivan, 2026-09-09). Dark is the homepage's glass: a translucent
 * teal fill (primary) or a well darker than the surface (secondary), both
 * under a 1px rim that is brightest at the top-left, masked to the edge.
 * Light is the product's flat pair: brand-black pill, white pill with a
 * hairline stroke. Ghost is unchanged in both. */
.button-primary {
    background: rgba(46, 88, 90, 0.82);
    color: var(--brand-white);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.28),
        0 6px 18px rgba(0, 0, 0, 0.22);
}
.button-secondary {
    background: rgba(28, 30, 30, 0.72);
    color: var(--text-primary);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.28),
        0 6px 18px rgba(0, 0, 0, 0.22);
}
/* the rim */
.button-primary::after, .button-secondary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background:
        radial-gradient(38% 60% at 22% 6%,
            rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 76%),
        rgba(255, 255, 255, 0.13);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    transition: background 0.15s linear;
}
.button-primary::after {
    background:
        radial-gradient(38% 60% at 22% 6%,
            rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 76%),
        rgba(167, 215, 214, 0.3);   /* the rim takes the teal */
}
@media (any-hover: hover) {
    .button-primary:hover { background: rgba(58, 104, 106, 0.9); }
    .button-secondary:hover { background: rgba(40, 43, 43, 0.82); }
}
.button-primary:active { background: rgba(46, 88, 90, 0.95); }
.button-secondary:active { background: rgba(40, 43, 43, 0.82); }

/* light: flat, no glass, no rim. Primary stays the brand teal, as Martin set
 * it on 2026-09-07 and Ivan confirmed on 09-09; secondary is the Althea
 * product's white pill with the hairline stroke. */
[data-theme='light'] .button-primary {
    /* the accent teal, a step darker and quieter than the glyphs (Ivan 2026-09-09) */
    background: color-mix(in lch, var(--action-accent-bg), black 10%);
    color: var(--action-accent-fg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
[data-theme='light'] .button-secondary {
    background: var(--action-secondary-bg);   /* white in light */
    border: var(--border-hairline) solid var(--border-default);   /* #dcdcd4 in light */
    color: var(--text-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--shadow-xs);
}
[data-theme='light'] .button-primary::after, [data-theme='light'] .button-secondary::after { content: none; }
@media (any-hover: hover) {
    [data-theme='light'] .button-primary:hover { background: color-mix(in lch, var(--action-accent-bg), black 18%); }
    [data-theme='light'] .button-secondary:hover { background: var(--action-secondary-bg-hover); }
}
[data-theme='light'] .button-primary:active { background: color-mix(in lch, var(--action-accent-bg), black 26%); }
[data-theme='light'] .button-secondary:active { background: var(--action-secondary-bg-hover); }

.button-ghost {
    background: transparent;
    color: var(--text-tertiary);
}

@media (any-hover: hover) {
    .button-ghost:hover {
        color: var(--text-primary);
        background: #30302e;
    }
}

.button-ghost:active {
    background: #33332f;
}

[data-theme='light'] .button-ghost:hover {
    background: #e0e0d9;
}

[data-theme='light'] .button-ghost:active {
    background: #dadad2;
}