/* ═══════════════════════════════════════════
   BUTTON SYSTEM — two percent
   ═══════════════════════════════════════════ */

/* ─── SHARED BASE ──────────────────────────── */
.btn-primary,
.btn-ghost,
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: var(--ts-body-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-body);
  border-radius: 100px;
  text-decoration: none;
  cursor: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* Shared pseudo-element base */
.btn-primary::before,
.btn-primary::after,
.btn-ghost::before,
.btn-ghost::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

/* ─── PRIMARY ──────────────────────────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.82) 0%,
    rgba(248,249,252,0.74) 45%,
    rgba(241,245,255,0.82) 100%
  );
  color: #5b6485;
  padding: 12px 24px;
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.60),
    inset 0 -1px 0 rgba(255,255,255,0.18),
    0 2px 6px rgba(0,0,0,0.03),
    0 10px 24px rgba(50,60,95,0.08);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

/* Optical rim — warm gold → silver → cool blue */
.btn-primary::before {
  inset: 0;
  padding: 1.25px;
  background: linear-gradient(
    90deg,
    rgba(223,190,96,0.90) 0%,
    rgba(237,239,244,0.92) 38%,
    rgba(191,203,255,0.92) 76%,
    rgba(132,198,255,0.88) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Top specular reflection + inner glass thickness */
.btn-primary::after {
  inset: 1px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.64) 0%,
    rgba(255,255,255,0.28) 18%,
    rgba(255,255,255,0.08) 42%,
    rgba(255,255,255,0) 68%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    inset 0 0 0 1px rgba(255,255,255,0.14);
}

.btn-primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.86) 0%,
    rgba(249,250,253,0.78) 45%,
    rgba(242,246,255,0.86) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.64),
    inset 0 -1px 0 rgba(255,255,255,0.20),
    0 3px 8px rgba(0,0,0,0.04),
    0 14px 28px rgba(50,60,95,0.10);
}

/* ─── PRIMARY DARK MODIFIER ───────────────── */
.btn-primary.dk {
  color: rgba(255,255,255,0.92);
  background: linear-gradient(
    135deg,
    rgba(26,36,68,0.82) 0%,
    rgba(20,30,58,0.76) 45%,
    rgba(24,39,78,0.82) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(255,255,255,0.08),
    0 10px 24px rgba(0,0,0,0.28);
}
.btn-primary.dk::before {
  padding: 1.25px;
  background: linear-gradient(
    90deg,
    rgba(224,191,99,0.92) 0%,
    rgba(212,220,242,0.70) 38%,
    rgba(173,191,255,0.82) 76%,
    rgba(120,188,255,0.82) 100%
  );
}
.btn-primary.dk::after {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.28) 0%,
    rgba(255,255,255,0.10) 18%,
    rgba(255,255,255,0.03) 42%,
    rgba(255,255,255,0) 68%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}
.btn-primary.dk:hover {
  transform: translateY(-1px);
  background: linear-gradient(
    135deg,
    rgba(30,42,76,0.86) 0%,
    rgba(24,34,64,0.80) 45%,
    rgba(28,44,84,0.86) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    inset 0 -1px 0 rgba(255,255,255,0.10),
    0 14px 32px rgba(0,0,0,0.34);
}

/* ─── GHOST (light background default) ─────── */
.btn-ghost {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.56) 0%,
    rgba(250,250,252,0.48) 48%,
    rgba(246,248,252,0.56) 100%
  );
  color: var(--ink2);
  padding: 12px 24px;
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -1px 0 rgba(255,255,255,0.10),
    0 1px 3px rgba(0,0,0,0.02),
    0 8px 18px rgba(50,60,95,0.04);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

/* Ghost rim — neutral, no warm tones */
.btn-ghost::before {
  inset: 0;
  padding: 1px;
  background: linear-gradient(
    90deg,
    rgba(220,223,230,0.72) 0%,
    rgba(245,246,248,0.84) 40%,
    rgba(221,227,240,0.72) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Ghost specular — softer than primary */
.btn-ghost::after {
  inset: 1px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.34) 0%,
    rgba(255,255,255,0.14) 18%,
    rgba(255,255,255,0.04) 42%,
    rgba(255,255,255,0) 68%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.56),
    inset 0 0 0 1px rgba(255,255,255,0.08);
}

.btn-ghost:hover {
  transform: translateY(-1px);
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.62) 0%,
    rgba(251,251,253,0.54) 48%,
    rgba(247,249,253,0.62) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.48),
    inset 0 -1px 0 rgba(255,255,255,0.12),
    0 2px 4px rgba(0,0,0,0.025),
    0 10px 20px rgba(50,60,95,0.05);
}

/* ─── GHOST DARK MODIFIER ──────────────────── */
.btn-ghost.dk {
  color: rgba(255,255,255,0.82);
  background: linear-gradient(
    135deg,
    rgba(14,23,46,0.56) 0%,
    rgba(14,22,42,0.48) 48%,
    rgba(15,26,52,0.56) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    0 8px 18px rgba(0,0,0,0.18);
}
.btn-ghost.dk::before {
  padding: 1px;
  background: linear-gradient(
    90deg,
    rgba(88,104,145,0.42) 0%,
    rgba(122,139,183,0.28) 45%,
    rgba(88,104,145,0.42) 100%
  );
}
.btn-ghost.dk::after {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.05) 18%,
    rgba(255,255,255,0.015) 42%,
    rgba(255,255,255,0) 68%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}
.btn-ghost.dk:hover {
  transform: translateY(-1px);
  background: linear-gradient(
    135deg,
    rgba(18,28,54,0.62) 0%,
    rgba(18,27,50,0.54) 48%,
    rgba(20,32,60,0.62) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    0 10px 22px rgba(0,0,0,0.22);
}

/* ─── TEXT LINK ─────────────────────────────── */
.btn-link {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  gap: 7px;
  transition: border-color .2s, color .2s, gap .2s;
}
.btn-link:hover {
  color: #4361ee;
  border-color: #4361ee;
  gap: 11px;
}

/* ─── MOBILE ───────────────────────────────── */
@media (max-width: 767px) {
  .btn-primary svg,
  .btn-ghost svg {
    display: none;
  }
}