/* ==========================================================================
   Marathon Trends — button treatment
   --------------------------------------------------------------------------
   Loads after accent.css and is the last word on how a button looks. Delete
   the <link> in components/layout.js and the buttons return to the flat fills
   base.css and site.css give them; nothing above this file is edited.

   What changed and why.

   The buttons read as web-app rather than private-bank, for three specific
   reasons, and each is fixed here:

   1. Flat fills. A solid block of colour has no light in it. Real materials —
      brass, enamel, anodised metal — carry a bright top edge and a darker
      base, because they sit under a light source. That is one inset highlight
      and one inset shade, and it is most of the difference.

   2. Coloured glow. A large soft halo in the button's own colour is the single
      strongest "this is a website" signal there is. Expensive things cast a
      tight, dark, slightly offset contact shadow instead, because that is what
      an object resting on a surface actually does.

   3. The secondary button inverted to a solid fill on hover. Two solid blocks
      side by side compete; there is no longer a primary action. The ghost
      button now takes a low-opacity wash, so the hierarchy holds in both
      states.

   The palette is unchanged in substance — champagne gold at rest, emerald on
   hover, which is the interaction language the rest of the site already
   speaks. Gold is widened from one flat tone into a four-stop ramp so it reads
   as struck metal rather than as tan.

   The two states take opposite labels, which is a consequence of the palette
   rather than a decoration: struck gold is a light surface and wants dark ink,
   a jewel emerald is a dark one and wants a pale label. Forcing one label
   across both would mean compromising whichever state it suited less.

   Every stop in both ramps is measured against its own ink, because a gradient
   is only as legible as its worst band. Gold carries dark ink at 7.2–14:1;
   emerald carries the warm off-white at roughly 5–7.6:1. The label is 10px, so
   4.5:1 is the bar, and the emerald's lightest stop is the binding one.
   ========================================================================== */

:root{
  /* Struck champagne. The pinch between stops 2 and 3 is the specular line —
     without it the gradient reads as a wash rather than as a curved surface. */
  --btn-gold-1:#EFDCAE;
  --btn-gold-2:#D3AF6D;
  --btn-gold-3:#C09A53;
  --btn-gold-4:#E0C591;

  /* Emerald, same construction. Deep and blue-leaning — gemstone rather than
     highlighter. The earlier ramp sat around #089E70, which is bright and
     slightly yellow-green: legible, but it reads as software, not as a jewel.
     Going this dark flips which way the label has to go; see --btn-ink-em. */
  --btn-em-1:#0D7354;
  --btn-em-2:#0A6247;
  --btn-em-3:#06563D;   /* the specular pinch — darkest point of the curve */
  --btn-em-4:#0C6E4E;

  --btn-ink:#14100A;          /* warm near-black — green-black goes muddy on gold */

  /* Pale, not black. On a bright green a dark label wins; on a jewel emerald
     it is the wrong way round — dark ink turns the whole thing to sludge and
     measures worse. The warm off-white is also the more expensive pairing:
     warm type on a cool stone, which is how the gold is set too. */
  --btn-ink-em:#F3EFE6;

  /* The ghost button's hover, which is a hairline and a label rather than a
     fill, so it cannot go as deep as the ramp above without vanishing into the
     page. This is the jewel family pulled up to where it still reads as text:
     6:1 on --bg, against the old mint's 7.1:1 — bluer and deeper, so the two
     kinds of button finally agree with each other. */
  --btn-em-line:#16A97E;
  --btn-em-line-rgb:22,169,126;

  /* Contact shadow, not a halo. Tight, dark, and offset downward. */
  --btn-lift:0 1px 2px rgba(0,0,0,.34), 0 7px 18px -9px rgba(0,0,0,.72);
  --btn-lift-hi:0 2px 4px rgba(0,0,0,.36), 0 14px 30px -12px rgba(0,0,0,.78);
  --btn-bevel:inset 0 1px 0 rgba(255,255,255,.52), inset 0 -1px 0 rgba(0,0,0,.24);
  /* A deep stone takes a quieter highlight than polished metal, and adds a
     hairline right around it: at this depth the emerald is only ~2.6:1 against
     the page, so the edge is what draws the shape rather than the fill. */
  --btn-bevel-em:inset 0 0 0 1px rgba(255,255,255,.13),
                 inset 0 1px 0 rgba(255,255,255,.22),
                 inset 0 -1px 0 rgba(0,0,0,.30);
}

/* ---------- shared ------------------------------------------------------- */

.btn{
  padding:15px 28px;
  letter-spacing:.16em;
  font-weight:600;
  border-radius:var(--radius-sm);
  transition:background .45s var(--ease-out), border-color .45s var(--ease-out),
             box-shadow .45s var(--ease-out), color .45s var(--ease-out),
             transform .32s var(--ease-out);
}

/* base.css sweeps a light bar across on hover. Kept — it is the one existing
   flourish that suits metal — but taken down from .35 to .22, because at full
   strength it washes the specular line out of the gradient underneath. */
.btn:before{ background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent) }

/* ---------- primary ------------------------------------------------------ */

.btn.gold{
  background:linear-gradient(177deg,
    var(--btn-gold-1) 0%, var(--btn-gold-2) 42%,
    var(--btn-gold-3) 56%, var(--btn-gold-4) 100%);
  background-size:auto;
  color:var(--btn-ink);
  border:1px solid rgba(0,0,0,.20);
  box-shadow:var(--btn-bevel), var(--btn-lift);
}

.btn.gold:hover,
.btn.gold:focus-visible{
  background:linear-gradient(177deg,
    var(--btn-em-1) 0%, var(--btn-em-2) 42%,
    var(--btn-em-3) 56%, var(--btn-em-4) 100%);
  color:var(--btn-ink-em);
  border-color:rgba(255,255,255,.10);
  box-shadow:var(--btn-bevel-em), var(--btn-lift-hi);
  transform:translateY(-2px);
}

.btn.gold:active{ transform:translateY(0); box-shadow:var(--btn-bevel-em), var(--btn-lift) }

/* ---------- secondary ---------------------------------------------------- */

/* A hairline and a wash. Never a second solid block — see note 3 above. */
.btn:not(.gold){
  background:transparent;
  border:1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  color:var(--text);
  box-shadow:none;
}

.btn:not(.gold):hover,
.btn:not(.gold):focus-visible{
  background:color-mix(in srgb, var(--btn-em-line) 13%, transparent);
  border-color:color-mix(in srgb, var(--btn-em-line) 80%, transparent);
  color:var(--btn-em-line);
  box-shadow:0 7px 20px -12px rgba(var(--btn-em-line-rgb),.7);
  transform:translateY(-2px);
}

.btn:not(.gold):active{ transform:translateY(0) }

/* ---------- focus -------------------------------------------------------- */

/* Keyboard focus gets its own ring rather than borrowing the hover state, so
   it stays visible on the primary button where hover already fills the shape. */
.btn:focus-visible{
  outline:2px solid var(--acc2);
  outline-offset:3px;
}

/* ---------- the nav CTA -------------------------------------------------- */

/* site.css pulses this one on a 4s loop via btnPulse, which also animates
   box-shadow and would drive straight over the bevel. A permanently throbbing
   button is a discount-retail cue and it is the first thing on the page, so it
   is stopped here and left to hold attention on its treatment alone. */
.nav-tail .btn.gold{ animation:none }

/* ---------- the Connect tab ---------------------------------------------- */

/* Same construction as the primary button so the two read as one family. The
   two expanding rings are kept — this is the page's standing invitation and
   earns some motion — but taken well down, and the halo is replaced with the
   same contact shadow everything else uses. */
.connect{
  background:linear-gradient(135deg,
    var(--btn-em-1) 0%, var(--btn-em-2) 45%,
    var(--btn-em-3) 62%, var(--btn-em-4) 100%);
  background-size:auto;
  color:var(--btn-ink-em);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),
             inset 0 1px 0 rgba(255,255,255,.24),
             inset 0 -1px 0 rgba(0,0,0,.28),
             0 2px 4px rgba(0,0,0,.34),
             0 16px 34px -14px rgba(0,0,0,.8);
  animation:connectBob 3.6s ease-in-out infinite;
}
.connect:before,.connect:after{ border-color:rgba(var(--acc-rgb),.26) }
.connect:hover,.connect:focus-visible{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20),
             inset 0 1px 0 rgba(255,255,255,.28),
             inset 0 -1px 0 rgba(0,0,0,.28),
             0 3px 6px rgba(0,0,0,.36),
             0 22px 44px -16px rgba(0,0,0,.85);
}

@media(prefers-reduced-motion:reduce){
  .btn,.connect{ transition-duration:.01ms }
  .btn.gold:hover,.btn:not(.gold):hover{ transform:none }
}