/* ============================================================
   BUTTONS
   ------------------------------------------------------------
   - Core button styles
   - Color variants
   - Extra back layer (fixed, darker, offset)
============================================================ */
.btn {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:16px;
  font-weight:800;
  text-decoration:none;
  border:1px solid var(--line);
  cursor:pointer;
  background:transparent;
  transition:transform .15s var(--ease);
  z-index:1;
}

/* Hover lift effect */
.btn:hover { transform:translateY(-1px); }

/* Fixed darker back layer */
.btn::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(0,0,0,0.25);
  transform:translate(4px,4px);
  border:1px solid var(--line);
  z-index:-1;
}

/* Layered highlight effect */
.btn.layered::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:-2;
  background:rgba(0,0,0,.35);
  transform:translateY(6px);
  box-shadow:0 2px 0 rgba(0,0,0,.3);
}

/* Color variants */
.btn.sage   { background:var(--sage);   color:#fff; border-color:rgba(62,94,78,.35); }
.btn.rust   { background:var(--rust);   color:#fff; border-color:rgba(183,102,74,.35); }
.btn.gold   { background:var(--gold);   color:#111; border-color:rgba(199,147,42,.45); }
.btn.ocean  { background:var(--ocean);  color:#fff; border-color:rgba(47,107,116,.35); }
.btn.plum   { background:var(--plum);   color:#fff; border-color:rgba(108,74,107,.35); }

.btn.dummy  { opacity:.65; filter:grayscale(.05); pointer-events:none; }
.btn.slim   { padding:8px 12px; border-radius:14px; }
.btn.wide   { width:100%; justify-content:flex-start; }


.btn-cta {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 16px;
  font-weight: 800;
  font-size: 18px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(90deg, #7b2cbf, #e63946, #118ab2);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}