/* ============================================================
   BUTTONS
   All reusable button variants used across the site:
   .btn (base), .btn-primary (filled), .btn-ghost (outlined),
   .btn-blue (blue accent outline).
   Focus styles for all interactive button-like elements live here.
   ============================================================ */


/* ── Base button — shared structure, font, and transition ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-btn);
  padding: 0.75rem 1.5rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.15s var(--ease-out),
    opacity 0.15s var(--ease-out),
    background 0.15s var(--ease-out),
    border-color 0.15s var(--ease-out);
}

/* ── Primary: solid fill using the text colour (inverts in light mode) ── */
.btn-primary {
  background: var(--color-text);
  color: var(--color-bg);
}

.btn-primary:hover {
  opacity: 0.82;
  color: var(--color-bg);
}

.btn-primary:active {
  transform: scale(0.98);
}

/* ── Ghost: transparent with a hairline border ── */
.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-hairline);
}

.btn-ghost:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

.btn-ghost:active {
  transform: scale(0.98);
}

/* ── Ghost draw: border traces in from the left on hover (matches btn-blue-draw timing) ── */
.btn-ghost-draw {
  position: relative;
  isolation: isolate;
  transition:
    transform 0.15s var(--ease-out),
    color 1.4s var(--ease-out);
}

.btn-ghost-draw::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid var(--color-text-muted);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s var(--ease-out);
  pointer-events: none;
}

.btn-ghost-draw:hover::before,
.btn-ghost-draw:focus-visible::before {
  clip-path: inset(0 0 0 0);
}

.btn-ghost-draw:hover {
  border-color: var(--color-hairline);
  color: var(--color-text);
  opacity: 1;
}

/* ── Blue: transparent with the brand-blue accent colour ──
   Border opacity is a theme-reactive token defined in base.css:
   dark  → --color-blue-border: rgba(107, 175, 224, 0.28)
   light → --color-blue-border: rgba(26,  120, 178, 0.28)
   No [data-theme] override needed here — the token handles both. */
.btn-blue {
  background: transparent;
  color: var(--color-blue);
  border: 1px solid var(--color-blue-border);
}

.btn-blue:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
  opacity: 1;
}

.btn-blue:active {
  transform: scale(0.98);
}

/* ── Blue draw: border traces in from the left on hover (slower, deliberate) ── */
.btn-blue-draw {
  position: relative;
  isolation: isolate;
  transition:
    transform 0.15s var(--ease-out),
    color 1.4s var(--ease-out);
}

.btn-blue-draw::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid var(--color-blue);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s var(--ease-out);
  pointer-events: none;
}

.btn-blue-draw:hover::before,
.btn-blue-draw:focus-visible::before {
  clip-path: inset(0 0 0 0);
}

.btn-blue-draw:hover {
  border-color: var(--color-blue-border);
  color: var(--color-blue);
  opacity: 1;
}


/* ── Focus-visible: consistent keyboard outline across all interactive elements ── */
.btn:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}