/* =========================================================
   Buttons (overlay-based reveal; no gradient toggling)
   ---------------------------------------------------------
   Variants:
     • .button          → dark idle; gradient revealed on hover
     • .button.outline  → dark always; halo on hover (no gradient)
     • .button.color    → gradient always visible
     • .button.ghost    → gradient visible idle; dark overlay on hover
   Notes:
     • Gradient is ALWAYS present (background-image). We animate a dark
       inset overlay via box-shadow to hide/reveal it smoothly.
     • Keep the same number of box-shadow layers across states to avoid pops.
     • Transition only the properties that actually change.
   ========================================================= */


/* ---------- Base token defaults ---------- */
.button {
  --btn-color-start: var(--blue-500);
  --btn-color-end:   var(--blue-700);
  --btn-text:        var(--white);
  --btn-surface:     var(--grey-900);

  --btn-radius: 5px;
  --btn-pad-y:  .65rem;
  --btn-pad-x:  1rem;

  --btn-halo-color:  color-mix(in srgb, var(--btn-color-end), transparent 30%);
  --btn-halo-blur:   12px;
  --btn-halo-spread: 4px;

  /* NEW: overlay color we animate (idle = fully dark) */
  --btn-overlay: var(--btn-surface);

  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  border: 0;
  cursor: pointer;
  text-decoration: none;

  color: var(--btn-text);
  font-weight: 300;
  font-size: var(--step-0);
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;

  /* Gradient is always present; dark overlay hides it in idle */
  background-image: linear-gradient(90deg, var(--btn-color-start), var(--btn-color-end));

  background-color: var(--btn-surface) !important;
  background-clip: padding-box !important;
  /* 2) Neutralize the "transparent halo" layer in IDLE (it can fringe) */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.05),
    inset 0 0 0 9999px var(--btn-overlay),
    0 0 0 0 rgba(0,0,0,0) !important; /* zero blur & spread in idle */

  /* Only animate what changes — prevents flicker */
  transition: all 0.3s ease;
}

/* ---------- Hover & focus (reveal gradient; halo on) ---------- */
.button:hover,
.button:focus-visible {
  outline: none;
  color: var(--btn-text);
  --btn-overlay: transparent; /* fades away; gradient revealed */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.05),
    inset 0 0 0 9999px var(--btn-overlay),
    0 0 var(--btn-halo-blur) var(--btn-halo-spread) var(--btn-halo-color) !important;
}


/* =========================================================
   Variants
   ========================================================= */

/* Color variant — gradient always visible (no dark overlay) */
.button.color,
.button.color:hover,
.button.color:focus-visible {
  --btn-overlay: transparent;
}

/* Outline variant — no gradient at all; solid dark both states */
.button.outline,
.button.outline:hover,
.button.outline:focus-visible {
  background-image: none;        /* remove gradient layer */
  --btn-overlay: var(--btn-surface);
  --btn-halo-blur:   18px;
  --btn-halo-spread: 2px;
  outline: none;
  /* keep the same shadow stack; halo will still animate in hover/focus */
}

/* Ghost variant — gradient visible idle; on hover a dark overlay fades IN */
.button.ghost,
.button.ghost:focus-visible {
  /* idle: show gradient, overlay fully transparent */
  --btn-overlay: transparent;
  /* keep halo off in idle; same stack as base */
}
.button.ghost:hover {
  /* hover: fade IN dark overlay over the gradient */
  --btn-overlay: var(--btn-surface);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.05),
    inset 0 0 0 9999px var(--btn-overlay),
    0 0 var(--btn-halo-blur) var(--btn-halo-spread) var(--btn-halo-color);
}


/* =========================================================
   Sizes
   ========================================================= */
.button.sm { --btn-pad-y: .45rem; --btn-pad-x: 1rem;   font-size: var(--step--1); }
.button.lg { --btn-pad-y: .85rem; --btn-pad-x: 1.6rem; font-size: var(--step-1); }
.button.wide { --btn-pad-x: 2em; }
.button.extra-wide { --btn-pad-x: 4em; }
/* guard against accidental stacking */
.button.wide.extra-wide { --btn-pad-x: 4em; }


/* =========================================================
   Palettes (override gradient stops; text stays white unless noted)
   ========================================================= */
.button.blue          { --btn-color-start: var(--lt-blue-500);       --btn-color-end: var(--blue-600); }
.button.indigo        { --btn-color-start: var(--indigo-400);        --btn-color-end: var(--indigo-700); }
.button.purple        { --btn-color-start: var(--purple-400);        --btn-color-end: var(--purple-700); }
.button.deep-purple   { --btn-color-start: var(--deep-purple-300);   --btn-color-end: var(--deep-purple-700); }
.button.violet        { --btn-color-start: var(--lavender-500);      --btn-color-end: var(--violet-500); }
.button.cyan          { --btn-color-start: var(--cyan-400);          --btn-color-end: var(--cyan-700); }
.button.teal          { --btn-color-start: var(--teal-400);          --btn-color-end: var(--teal-700); }
.button.green         { --btn-color-start: var(--green-400);         --btn-color-end: var(--green-700); }
.button.emerald       { --btn-color-start: var(--emerald-500);       --btn-color-end: var(--green-800); }
.button.yellow        { --btn-color-start: var(--amber-500);         --btn-color-end: var(--yellow-700); }
.button.orange        { --btn-color-start: var(--orange-500);        --btn-color-end: var(--deep-orange-700); }
.button.red           { --btn-color-start: var(--red-400);           --btn-color-end: var(--red-700); }
.button.pink          { --btn-color-start: var(--pink-400);          --btn-color-end: var(--pink-700); }
.button.rose          { --btn-color-start: var(--pink-400);          --btn-color-end: var(--rose-500); }

/* White palette special-casing */
.button.white               { --btn-color-start: var(--white); --btn-color-end: var(--white); --btn-halo-blur: 14px; --btn-halo-spread: 2px;}
.button.white.color,
.button.white.color:hover,
.button.white:focus-visible,
.button.white:hover,
.button.white.color:focus-visible { --btn-text: #111; }
.button.white.outline,
.button.white.outline:hover,
.button.white.outline:focus-visible {
  --btn-text: var(--white);
  --btn-overlay: var(--grey-900);
}
.button.white.ghost         { --btn-text: #111; }
.button.white.ghost:hover   { --btn-text: #fff; }


/* =========================================================
   Disabled
   ========================================================= */
.button[disabled],
.button[aria-disabled="true"]{
  opacity: .6;
  pointer-events: none;
  filter: grayscale(.1);
}

/* --- ICON PILL (inline-flex so the icon stays centered when collapsed) --- */
.button.icon {
  --icon-d: 2.4rem;      /* circle diameter */
  --label-max: 16ch;     /* max label width when expanded */
  --label-gap: 0;        /* gap only when expanded */

  display: inline-flex;
  align-items: center;
  justify-content: center;          /* center the icon in circle mode */
  gap: var(--label-gap);

  min-width: var(--icon-d);         /* circle size */
  height: var(--icon-d);
  padding: 0;                        /* true circle */
  border-radius: 9999px;
  overflow: hidden;                  /* hide label while collapsed */
}

/* Fixed-size icon cell */
.button.icon .btn-icn {
  flex: 0 0 var(--icon-d);
  width: var(--icon-d);
  height: var(--icon-d);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}

/* SVG always visible, centered, using currentColor */
.button.icon .btn-icn svg {
  width: 50%;
  height: 50%;
  display: block;
  stroke: currentColor;
  fill: none;
}

/* Label starts hidden and widthless */
.button.icon .btn-label {
  max-width: 0;                      /* no width in circle mode */
  overflow: hidden;                  /* clip text when collapsed */
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    max-width .25s ease,
    opacity .18s ease,
    transform .25s ease,
    margin-left .25s ease;
  position: relative;
  z-index: 1;
}

/* Expand: show label, add right padding, anchor icon to the left */
.button.icon:hover,
.button.icon:focus-visible,
.button.icon.is-open {
  --label-gap: 0rem;
  justify-content: flex-start;       /* icon at left once expanded */
  padding-right: var(--btn-pad-x);
  padding-left: 2px;
}

.button.icon:hover .btn-label,
.button.icon:focus-visible .btn-label,
.button.icon.is-open .btn-label {
  max-width: var(--label-max);
  margin-left: var(--label-gap);
  opacity: 1;
  transform: none;
}