/* Rhenti design system — component classes.
   Ported 1:1 from the design-system bundle (Button, Badge, Tag) so the page
   consumes tokens rather than hard-coded values. */

/* ---------- Button ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:600;
  border-radius:var(--radius-pill);
  cursor:pointer;text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn:hover{transform:var(--hover-lift)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn[disabled],.btn[aria-disabled="true"]{cursor:not-allowed;opacity:.45;transform:none}

.btn--sm{padding:8px 18px;font-size:14px}
.btn--md{padding:12px 24px;font-size:15px}
.btn--lg{padding:16px 32px;font-size:16px}

.btn--primary{background:var(--rose-500);color:#fff;border:none}
.btn--primary:hover{background:var(--rose-600);color:#fff}
.btn--primary:active{background:var(--rose-700)}

.btn--secondary{background:transparent;color:var(--ink-900);border:1.5px solid var(--ink-900)}
.btn--secondary:hover{background:var(--ink-900);color:#fff}
.btn--secondary:active{background:var(--ink-800);color:#fff}

.btn--ghost{background:transparent;color:var(--ink-900);border:none}
.btn--ghost:hover{background:var(--gray-100);color:var(--ink-900)}
.btn--ghost:active{background:var(--gray-200)}

.btn--inverse{background:#fff;color:var(--ink-900);border:none}
.btn--inverse:hover{background:var(--cream);color:var(--ink-900)}
.btn--inverse:active{background:var(--cream-2)}

/* Arrow affordance used on every "Book a Tour" call to action.
   On hover the arrow departs right and re-enters from the left — the label
   acknowledges intent while the button lifts. */
.btn__label{display:inline-flex;align-items:center;gap:10px}
.btn__label > span[aria-hidden]{display:inline-block}
.btn:hover .btn__label > span[aria-hidden]{animation:cta-arrow .5s var(--ease-out)}
@keyframes cta-arrow{
  0%{transform:none;opacity:1}
  45%{transform:translateX(150%);opacity:0}
  50%{transform:translateX(-150%);opacity:0}
  100%{transform:none;opacity:1}
}
.btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){
  .btn:hover .btn__label > span[aria-hidden]{animation:none}
  .btn:hover{transform:none}
}

/* ---------- Badge ---------- */
.badge{
  display:inline-block;font-family:var(--font-body);
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 14px;border-radius:var(--radius-pill);
  background:var(--ink-900);color:#fff;
}
.badge--rose{background:var(--rose-500);color:#fff}
.badge--rose-soft{background:var(--rose-100);color:var(--rose-700)}
.badge--success{background:var(--success-soft);color:var(--success)}
.badge--warning{background:var(--warning-soft);color:var(--warning)}
.badge--error{background:var(--error-soft);color:var(--error)}
.badge--neutral{background:var(--gray-100);color:var(--gray-700)}

/* ---------- Tag ---------- */
.tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:13.5px;font-weight:500;
  padding:6px 14px;border-radius:var(--radius-pill);
  border:1px solid var(--gray-300);color:var(--ink-900);background:#fff;
}

/* ---------- Icons ---------- */
.icon{
  width:22px;height:22px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.icon--sm{width:20px;height:20px}
.icon--xs{width:14px;height:14px}