/* Button system — variant × color, no border-radius anywhere (brand
   guide uses square edges throughout).

   Variants:
     .button--primary    filled, colored background, white/contrast text
     .button--secondary  outlined, colored border/text, transparent bg
     .button--ghost      text-only, colored text, no border/background
     .button--underline  text-only, growing inset-shadow underline on
                          hover (same mechanic as p a's link underline)

   Modifiers (combine with any variant):
     .button--size-small  smaller padding/font-size
     .button--border      forces a 1px solid border in the button's own
                           color, regardless of variant

   Colors (combine with a variant): --color-black --color-primary
   --color-secondary --color-accent
     e.g. class="button button--primary button--color-accent"

   Usage:
     <a class="button button--primary button--color-accent" href="...">Label</a> */

.button {
  display: inline-block;
  padding: 0.75em 1.5em;
  border: var(--theme-line-width) solid transparent;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  letter-spacing: .1em;
}

.button:visited {
  color: inherit;
}

/* Primary — filled */

.button--primary.button--color-black {
  background: var(--theme-color-contrast);
  border-color: var(--theme-color-contrast);
  color: #fff;
}

.button--primary.button--color-primary {
  background: var(--theme-color-primary);
  border-color: var(--theme-color-primary);
  color: #fff;
}

.button--primary.button--color-secondary {
  background: var(--theme-color-secondary);
  border-color: var(--theme-color-secondary);
  color: #fff;
}

.button--primary.button--color-accent {
  background: var(--theme-color-accent);
  border-color: var(--theme-color-accent);
  color: var(--theme-color-contrast);
}

/* Secondary — outlined */

.button--secondary.button--color-black {
  background: transparent;
  border-color: var(--theme-color-contrast);
  color: var(--theme-color-contrast);
}

.button--secondary.button--color-primary {
  background: transparent;
  border-color: var(--theme-color-primary);
  color: var(--theme-color-primary);
}

.button--secondary.button--color-secondary {
  background: transparent;
  border-color: var(--theme-color-secondary);
  color: var(--theme-color-secondary);
}

.button--secondary.button--color-accent {
  background: transparent;
  border-color: var(--theme-color-accent);
  color: var(--theme-color-accent);
}

/* Ghost — text only, no border/background */

.button--ghost {
  border-color: transparent;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.button--ghost.button--color-black {
  color: var(--theme-color-contrast);
}

.button--ghost.button--color-primary {
  color: var(--theme-color-primary);
}

.button--ghost.button--color-secondary {
  color: var(--theme-color-secondary);
}

.button--ghost.button--color-accent {
  color: var(--theme-color-accent);
}

/* Underline — text only. A thin accent line sits at the bottom by
   default; on hover the whole button fills with the accent color and
   the label pushes up out of view while a ::after duplicate (built
   from data-text via attr()) slides up from below to take its place.

   Padding lives on .button__label, NOT on .button — the label is set
   to height: 100% of the button and used as the translateY(-100%)
   reference, so the push-up distance always matches the button's own
   height regardless of how tall its padding makes it. (Padding on
   .button itself would make the button taller than the inline label
   content, so translateY(-100%) — which is relative to the label's
   own height — would fall short of the button's real bottom edge and
   both labels would be visible at once mid-hover.) */

.button--underline {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  color: var(--theme-color-primary);
  border-color: transparent;
  background: transparent;
  /* box-shadow: inset 0 -0.2em 0 0 var(--theme-color-accent); */
  transition: box-shadow 0.25s var(--theme-ease-signature);
}

.button--underline {
  padding: .2rem .2rem .15rem .2rem;
}

.button--underline:hover {
  box-shadow: inset 0 -0.2em 0 0 transparent;
}

.button--underline .button__label {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0.75em 1.5em;
  transform: translateY(0);
  transition: transform 0.3s var(--theme-ease-signature);
}

.button--underline .button__label::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0.75em 1.5em;
  background-color: var(--theme-color-accent);
  color: white;
  transform: translateY(100%);
}

.button--underline:hover .button__label {
  transform: translateY(-100%);
}

.button--underline.button--color-black {
  color: var(--theme-color-contrast);
}

.button--underline.button--color-primary {
  color: var(--theme-color-primary);
}

.button--underline.button--color-secondary {
  color: var(--theme-color-secondary);
}

.button--underline.button--color-accent {
  color: var(--theme-color-accent);
}

/* Size modifier — smaller padding/font-size, combine with any variant */

.button--size-small span {
  padding: 0.4em 1em;
  font-size: 0.8125rem;
}

.button--underline.button--size-small .button__label,
.button--underline.button--size-small .button__label::after {
  padding: 0.4em 1em;
}

/* Border modifier — forces a 1px solid border in the button's own
   text color, regardless of variant */

.button--border {
  border-width: var(--theme-line-width);
  border-style: solid;
  border-color: currentcolor;
}