/*
 * Path: css/components/buttons.css
 * Purpose: Reusable button visuals (icon .btn, primary/secondary .cta, CTA rows)
 * Boundaries: No layout scaffolding beyond CTA row grouping; no hero/header logic here.
 * Depends on: css/core/tokens.css, css/core/typography.css
 * Version: 0.9.0 (pre-1.0)
 */

/* =========================================
   Icon button (generic)
   ========================================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-size);
  height: var(--btn-size);
  background: #fff;
  color: var(--text);
  border-radius: var(--btn-radius);
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.btn i{
  font-size: var(--icon-size);
  line-height: 1;
}

/* Maintain legibility on dark tone backgrounds */
body[data-theme-tone="dark"] .btn{
  color: var(--theme-bg);
}

/* Interactive polish (shared with hero replay through its own selector) */
.btn{
  transition:
    transform var(--dur-fast) var(--easing),
    box-shadow var(--dur-fast) var(--easing);
  will-change: transform;
}
.btn:hover{
  transform: translateY(1px);
  box-shadow: var(--shadow-lg);
}
.btn:focus-visible{
  outline: 2px solid var(--btn-primary-bg);
  outline-offset: 3px;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--btn-primary-bg) 25%, transparent),
    var(--shadow-md);
  text-decoration: none;
}

/* =========================================
   CTA buttons (primary / secondary)
   ========================================= */
.cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: var(--ec-w-semibold);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-fast) var(--easing),
    box-shadow var(--dur-fast) var(--easing);
}
.cta:hover{
  box-shadow: var(--shadow-md);
  transform: translateY(1px);
}
.cta:focus-visible{
  outline: 2px solid var(--btn-primary-bg);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
  text-decoration: none;
}

/* Secondary variant (uses semantic tokens) */
.cta.cta-secondary{
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
}

/* =========================================
   Nav context tweaks (inherits .cta visuals)
   ========================================= */
/* Keep nav CTA using the same base visuals and ensure no underline jiggle */
.site-nav .cta{
  text-decoration: none;
  /* Base padding is already 10px 16px; keep it consistent in nav */
  padding-inline: 16px;
}
.site-nav .cta:hover{
  text-decoration: none;
}