/* Shared UI components — landing, admin, and the future portal all load
   this. Tokens: tokens.css. Buttons v2: struck metal, not flat rectangles
   — layered gradient body, inset top highlight, soft drop, 1px sink on
   press, sheen sweep on hover.

   Contrast rule: a button's label is AA against its own body, always.
   Primary/brass carries ONYX text (6.6:1) — ivory on brass is 2.7:1 and
   is never used. */

.btn {
  --btn-face: var(--surface-raised);
  --btn-edge: var(--line-strong);
  --btn-ink: var(--ink);
  --btn-sink: rgba(16, 16, 20, 0.18);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.62em 1.35em;
  border: var(--hairline) solid var(--btn-edge);
  border-radius: var(--radius-pill);
  background: var(--btn-face);
  color: var(--btn-ink);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(16, 16, 20, 0.12);
  transition: transform var(--t-fast) var(--ease),
    box-shadow var(--t) var(--ease), background var(--t) var(--ease),
    border-color var(--t) var(--ease), color var(--t) var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 4px 10px var(--btn-sink);
  color: var(--btn-ink);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px var(--btn-sink);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.5;
  pointer-events: none;
}

/* Sheen: a slow highlight crossing the face on hover. Purely decorative,
   so it sits behind the label and is dropped for reduced motion. */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.28) 48%,
    transparent 66%
  );
  transform: translateX(-120%);
  transition: transform var(--t-slow) var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }

@media (prefers-reduced-motion: reduce) {
  .btn::after { display: none; }
}

/* Variants — each sets its own face/edge/ink so the shared chrome above
   never has to know which one it is. */
.btn-primary {
  --btn-face: linear-gradient(
    180deg,
    var(--brass-bright) 0%,
    var(--brass) 52%,
    var(--brass-deep) 100%
  );
  --btn-edge: var(--brass-deep);
  --btn-ink: var(--onyx);
  --btn-sink: rgba(90, 66, 20, 0.4);
}

.btn-secondary {
  --btn-face: linear-gradient(180deg, var(--onyx-lift) 0%, var(--onyx) 100%);
  --btn-edge: var(--onyx);
  --btn-ink: var(--ivory);
  --btn-sink: rgba(0, 0, 0, 0.45);
}

.btn-danger {
  --btn-face: linear-gradient(180deg, #b83a3a 0%, var(--garnet) 100%);
  --btn-edge: #7d2020;
  --btn-ink: var(--ivory);
  --btn-sink: rgba(90, 20, 20, 0.4);
}

.btn-outline,
.btn-ghost {
  --btn-face: transparent;
  --btn-ink: var(--ink);
  box-shadow: none;
}
.btn-outline { --btn-edge: var(--line-strong); }
.btn-ghost { --btn-edge: transparent; }
.btn-outline:hover,
.btn-ghost:hover {
  --btn-face: var(--surface-sunken);
  --btn-edge: var(--accent);
  box-shadow: 0 4px 10px var(--btn-sink);
}

/* Sizes */
.btn-sm { padding: 0.4em 0.95em; font-size: 0.85rem; }
.btn-lg { padding: 0.8em 1.9em; font-size: 1.05rem; }

.btn .ico { width: 1.05em; height: 1.05em; }