:root {
  /* Minimal tokens used by our button styles only */
  --bt-border: rgba(214, 214, 214, 0.6);
  --bt-border-outer: rgba(214, 214, 214, 0.4);
  --bt-hover-bg: rgba(255, 255, 255, 0.10);
  --bt-active-bg: rgba(255, 255, 255, 0.06);
  --bt-text: rgba(255, 255, 255, 0.9);
  --bt-white: #ffffff;
}

/* Base reset for buttons */
.button, button.square { font-family: inherit; font-size: 1rem; }

/* Braytech-like button (minimal, no global colors) */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 18px;
  color: var(--bt-text);
  background: transparent;
  transition: color .25s, background-color .25s, box-shadow .25s, transform .25s;
}
.button .text { position: relative; z-index: 2; }
.button::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(214,214,214,0.0);
  transition: box-shadow .25s, background-color .25s;
}
.button::after {
  content: '';
  position: absolute; inset: -2px;
  pointer-events: none; z-index: 1;
  box-shadow: 0 0 0 2px rgba(214,214,214,0.0);
  transform: scale(1.02) translateZ(0);
  transition: box-shadow .25s, transform .25s;
}
.button:hover {
  background-color: var(--bt-hover-bg);
}
.button:hover::before { box-shadow: inset 0 0 0 1px var(--bt-border); background-color: var(--bt-active-bg); }
.button:hover::after { box-shadow: 0 0 0 2px var(--bt-border-outer); transform: scale(1) translateZ(0); }

/* Lined variation */
.button.lined {
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}
.button.lined::before { box-shadow: inset 0 0 0 1px rgba(214,214,214,0.35); }
.button.lined:hover { color: var(--bt-white); }

/* Square icon button */
button.square {
  position: relative;
  width: 3rem; height: 3rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--bt-text);
  box-shadow: inset 0 0 0 1px rgba(214,214,214,0.25);
  transition: color .25s, background-color .25s, box-shadow .25s, transform .25s;
}
button.square::after {
  content: '';
  position: absolute; inset: -2px;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(214,214,214,0.0);
  transform: scale(1.02) translateZ(0);
  transition: box-shadow .25s, transform .25s;
}
button.square:hover { background: var(--bt-hover-bg); }
button.square:hover::after { box-shadow: 0 0 0 2px var(--bt-border-outer); transform: scale(1) translateZ(0); }