/* ============================================================
   COINBAX BUTTON SYSTEM
   Marketing site component library — buttons.

   Base class:    .btn
   Variants:      .btn-primary (default), .btn-secondary, .btn-blue,
                  .btn-on-dark (white fill), .btn-on-dark-outline (white outline)
   Sizes:         .btn-sm (32px) · [baseline 40px] · .btn-lg (48px) · .btn-xl (56px)

   On-dark variants are for buttons placed over a dark surface (e.g. the
   CtaBanner Carbon panel), independent of the page's light/dark theme.

   The baseline (.btn with no size modifier) matches the "Try Coinbax"
   button: Suisse Intl sans, 40px tall, 14px / weight 500, 8px radius.

   Usage:
     <a class="btn btn-primary">Try Coinbax</a>
     <a class="btn btn-primary btn-lg">Get Started</a>
     <a class="btn btn-secondary btn-sm">Learn More</a>
   ============================================================ */

/* ---------- Base ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;                 /* baseline */
    padding: 8px 16px;
    font-family: 'Suisse Intl', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;             /* baseline */
    font-weight: 500;
    line-height: 20px;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    border: 0 solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Sizes ---------- */
.btn-sm {
    height: 32px;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 18px;
    border-radius: 6px;
}

.btn-lg {
    height: 48px;
    padding: 12px 24px;
    font-size: 16px;
    line-height: 22px;
}

.btn-xl {
    height: 56px;
    padding: 16px 32px;
    font-size: 18px;
    line-height: 24px;
    border-radius: 10px;
}

/* ---------- Variants ---------- */

/* Primary — black background, white text (baseline brand button).
   Inverts in dark theme so it stays visible against Carbon 950. */
.btn-primary {
    background-color: #101014;   /* Carbon 950 */
    color: #FAFAFA;              /* Mist 50 */
}

:root[data-theme="dark"] .btn-primary,
:root.dark .btn-primary {
    background-color: #FAFAFA;   /* Mist 50 */
    color: #101014;             /* Carbon 950 */
}

.btn-primary:hover {
    opacity: 0.85;
}

/* Secondary — outlined, fills on hover. */
.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border-width: 1px;
    border-color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--text-primary);
    color: var(--background);
}

/* Blue / informational accent (Cobalt). */
.btn-blue {
    background: transparent;
    color: var(--accent-blue);
    border-width: 1px;
    border-color: var(--accent-blue);
}

.btn-blue:hover {
    background: var(--accent-blue);
    color: #FAFAFA;
}

/* On-dark: white fill / dark text. For buttons over a dark surface. */
.btn-on-dark {
    background-color: #FAFAFA;   /* Mist 50 */
    color: #101014;             /* Carbon 950 */
}

.btn-on-dark:hover {
    opacity: 0.88;
}

/* On-dark outline: transparent with a white outline, fills on hover. */
.btn-on-dark-outline {
    background: transparent;
    color: #FAFAFA;             /* Mist 50 */
    border-width: 1px;
    border-color: #56575A;       /* Stone 700 */
}

.btn-on-dark-outline:hover {
    background-color: #222126;   /* Carbon 800 */
    border-color: #8E9396;       /* Stone 500 */
}

/* Text link — a secondary action styled as a quiet underline-on-hover link
   rather than a button. Pairs next to a primary .btn in a CTA row. Matches
   the homepage hero secondary link and the card view-all links. */
.btn-text-link {
    display: inline-flex;
    align-items: center;
    align-self: center;
    height: auto;
    padding: 0 0 6px;
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.btn-text-link:hover {
    border-bottom-color: currentColor;
    opacity: 1;
}

/* ---------- Backward-compatible aliases ---------- */

/* Legacy size class — maps to the large size. */
.btn-large {
    height: 48px;
    padding: 12px 24px;
    font-size: 16px;
    line-height: 22px;
}