/* ==========================================================================
   The Golden Engraved Button System (design/buttons/design.md, 25 Oct 2026), every page
   Loaded after living-cape-system.css. One family of controls for the whole site:

     .jap-button--primary     the champagne-gold engraved plate (the main action of a section)
     .jap-button--secondary   cream with an antique-gold perimeter and a faint engraved inner rule
     .jap-button--tertiary    words with a gold hairline beneath (minor ways on)
     .jap-button--utility     compact, text-labelled controls (Previous, Next, Done)
     .jap-button--danger      kept apart from gold for anything irreversible
     sizes: --compact (44 px), standard (48 px), --large (52 px); --block fills its column
     .jap-button--on-dark     the light-on-dark versions for deep forest and photographs

   The flagship with the compass medallion is .btn-coin (styles.css, D49: the header's and the
   Travel Concierge's Make It Yours); it shares these tokens and states.
   No control in the family carries an arrow, chevron or arrow-in-circle (design §2.2).
   Nothing here matches the approved hero (.hero, .btn-champagne, .hero__link).
   ========================================================================== */

:root {
  --jap-ink: #142925;
  --jap-cream: #fbf7ee;
  --jap-gold-highlight: #f4e5bc;
  --jap-gold-light: #e8d2a0;
  --jap-gold-base: #d9bb77;
  --jap-gold-deep: #c49c4c;
  --jap-gold-stroke: #92702d;
  --jap-surface-dark: #10362f;
  --jap-focus: #175b9a;
  --jap-focus-on-dark: #f5dba3;
  --jap-danger: #a32116;
  --jap-danger-surface: #fff5f3;
  --jap-control-radius: 10px;
  --jap-cta-height: 48px;
  --jap-cta-height-large: 52px;
  --jap-cta-height-compact: 44px;
  --jap-control-gap: 10px;
  --jap-press: 220ms;
}

/* ---------- The shared base ---------- */
.jap-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jap-control-gap);
  min-height: var(--jap-cta-height);
  padding: 0.625rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--jap-control-radius);
  background: transparent;
  color: var(--jap-ink);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--jap-press) ease,
    box-shadow var(--jap-press) ease,
    background-color var(--jap-press) ease,
    border-color var(--jap-press) ease,
    color var(--jap-press) ease,
    filter var(--jap-press) ease;
}
.jap-button:hover {
  color: var(--jap-ink);
}
.jap-button .icon,
.jap-button .jap-engraved-icon {
  flex: none;
  width: 18px;
  height: 18px;
}
.jap-button:focus-visible {
  outline: 3px solid var(--jap-focus);
  outline-offset: 3px;
}
.jap-button--on-dark:focus-visible {
  outline-color: var(--jap-focus-on-dark);
}

/* ---------- Primary: the champagne-gold engraved plate ---------- */
.jap-button--primary {
  border-color: var(--jap-gold-stroke);
  background: linear-gradient(170deg, var(--jap-gold-highlight) 0%, var(--jap-gold-light) 31%, var(--jap-gold-base) 69%, var(--jap-gold-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 0 rgba(110, 75, 22, 0.15),
    0 3px 9px rgba(26, 29, 22, 0.16);
}
/* The etched inner rule, 3 px inside the plate */
.jap-button--primary::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 3px;
  border: 1px solid rgba(255, 249, 229, 0.6);
  border-radius: calc(var(--jap-control-radius) - 4px);
  pointer-events: none;
}
/* A single pass of light on hover, prominent primaries only (never on load, never looping) */
.jap-button--primary.jap-button--large::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 252, 240, 0.55) 50%, transparent 62%) 140% 0 / 260% 100% no-repeat;
  pointer-events: none;
}
.jap-button--primary:hover {
  filter: brightness(1.035);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 0 rgba(110, 75, 22, 0.15),
    0 6px 14px rgba(26, 29, 22, 0.2);
}
.jap-button--primary.jap-button--large:hover::after {
  background-position: -40% 0;
  transition: background-position 700ms ease;
}

/* ---------- Secondary: cream with an antique-gold perimeter ---------- */
.jap-button--secondary {
  border-color: var(--jap-gold-stroke);
  background: var(--jap-cream);
  box-shadow: inset 0 0 0 3px rgba(217, 187, 119, 0.14);
}
.jap-button--secondary::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 3px;
  border: 1px solid rgba(146, 112, 45, 0.18);
  border-radius: calc(var(--jap-control-radius) - 4px);
  pointer-events: none;
}
.jap-button--secondary:hover {
  background: #fffdf7;
  border-color: #7a5c22;
  box-shadow:
    inset 0 0 0 3px rgba(217, 187, 119, 0.22),
    0 4px 10px rgba(26, 29, 22, 0.1);
}
/* On deep forest and over photographs: a solid dark ground, champagne rule, ivory words */
.jap-button--secondary.jap-button--on-dark {
  border-color: rgba(245, 219, 163, 0.75);
  background: rgba(7, 41, 36, 0.82);
  color: #fefcf7;
  box-shadow: inset 0 0 0 3px rgba(245, 219, 163, 0.08);
}
.jap-button--secondary.jap-button--on-dark::before {
  border-color: rgba(245, 219, 163, 0.22);
}
.jap-button--secondary.jap-button--on-dark:hover {
  border-color: var(--jap-focus-on-dark);
  background: rgba(1, 33, 31, 0.92);
  color: #fff;
}
.jap-button--secondary .icon,
.jap-button--secondary .jap-engraved-icon {
  color: var(--jap-gold-stroke);
}
.jap-button--secondary.jap-button--on-dark .icon,
.jap-button--secondary.jap-button--on-dark .jap-engraved-icon {
  color: var(--jap-focus-on-dark);
}

/* ---------- Tertiary: words over a gold hairline ---------- */
.jap-button--tertiary {
  min-height: var(--jap-cta-height-compact);
  padding: 0;
  border: 0;
  border-radius: 2px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--jap-gold-stroke);
  text-underline-offset: 6px;
  white-space: normal;
  text-align: left;
}
.jap-button--tertiary:hover {
  color: #0b4033;
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}
.jap-button--tertiary.jap-button--on-dark {
  color: #fefcf7;
  text-decoration-color: rgba(245, 219, 163, 0.75);
}
.jap-button--tertiary.jap-button--on-dark:hover {
  color: var(--jap-focus-on-dark);
}

/* ---------- Utility: compact text-labelled controls ---------- */
.jap-button--utility {
  min-width: var(--jap-cta-height-compact);
  min-height: var(--jap-cta-height-compact);
  padding: 0.5rem 1rem;
  border-color: rgba(146, 112, 45, 0.55);
  background: var(--jap-cream);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.jap-button--utility:hover {
  border-color: var(--jap-gold-stroke);
  background: #fffdf7;
}
.jap-button--utility.jap-button--on-dark {
  border-color: rgba(245, 219, 163, 0.6);
  background: rgba(7, 41, 36, 0.72);
  color: #fefcf7;
}
.jap-button--utility.jap-button--on-dark:hover {
  border-color: var(--jap-focus-on-dark);
  background: rgba(1, 33, 31, 0.9);
  color: #fff;
}

/* ---------- Danger: never gold ---------- */
.jap-button--danger {
  border-color: var(--jap-danger);
  background: var(--jap-danger-surface);
  color: var(--jap-danger);
}
.jap-button--danger:hover {
  background: #fde4df;
  color: #7f1810;
}

/* ---------- Sizes ---------- */
.jap-button--compact {
  min-height: var(--jap-cta-height-compact);
  padding: 0.5rem 1.05rem;
  font-size: 0.875rem;
}
.jap-button--large {
  min-height: var(--jap-cta-height-large);
  padding: 0.75rem 1.875rem;
}
.jap-button--block {
  width: 100%;
}

/* ---------- States ---------- */
/* Hover lifts a pixel; pressing returns it to the plane with a slightly deeper inset, no bounce */
@media (hover: hover) {
  .jap-button:not(.jap-button--tertiary):hover:not(:disabled):not([aria-disabled='true']):not([aria-busy='true']) {
    transform: translateY(-1px);
  }
}
.jap-button:not(.jap-button--tertiary):active:not(:disabled):not([aria-disabled='true']) {
  transform: translateY(0);
  filter: none;
  box-shadow: inset 0 2px 4px rgba(20, 41, 37, 0.18);
}
/* Disabled: muted, dashed edge and a no-entry cursor, still legible (not opacity alone) */
.jap-button:disabled,
.jap-button[aria-disabled='true'] {
  cursor: not-allowed;
  filter: saturate(0.35);
  border-style: dashed;
  box-shadow: none;
  transform: none;
  opacity: 0.72;
}
.jap-button--tertiary:disabled,
.jap-button--tertiary[aria-disabled='true'] {
  text-decoration-style: dashed;
}
/* Loading: the width holds, a quiet ring turns beside the label, and a second press does nothing */
.jap-button[aria-busy='true'] {
  cursor: progress;
  pointer-events: none;
}
.jap-button[aria-busy='true']::after {
  content: '';
  position: static;
  flex: none;
  order: -1;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  background: none;
  animation: jap-button-turn 0.8s linear infinite;
}
@keyframes jap-button-turn {
  to {
    transform: rotate(1turn);
  }
}

/* The specimen page (/design-system/, preview builds only) shows each state at rest */
.lc-specimen .jap-button--primary.is-hover {
  transform: translateY(-1px);
  filter: brightness(1.035);
}
.lc-specimen .jap-button--secondary.is-hover {
  background: #fffdf7;
  border-color: #7a5c22;
}
.lc-specimen .jap-button.is-pressed {
  box-shadow: inset 0 2px 4px rgba(20, 41, 37, 0.18);
  filter: none;
}
.lc-specimen .jap-button.is-focus {
  outline: 3px solid var(--jap-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .jap-button,
  .jap-button::after {
    transition: none !important;
  }
  .jap-button:hover,
  .jap-button:active {
    transform: none !important;
  }
  .jap-button--primary.jap-button--large::after {
    display: none;
  }
  .jap-button[aria-busy='true']::after {
    display: block;
    animation: none;
    border-right-color: currentColor;
    border-style: dotted;
  }
}

@media (forced-colors: active) {
  .jap-button {
    forced-color-adjust: auto;
    border: 1px solid ButtonText;
  }
  .jap-button::before {
    display: none;
  }
  .jap-button:focus-visible {
    outline-color: Highlight;
  }
  .jap-button:disabled,
  .jap-button[aria-disabled='true'] {
    color: GrayText;
    border-color: GrayText;
  }
}