/* -------------------------------------------------
   ABDA Buttons (uses your design tokens)
   ------------------------------------------------- */

:root{
  /* Derivatives from your tokens */
  --navy-dark: #071b32;     /* deeper than --navy */
  --red-dark:  #8f0d17;     /* deeper than --red  */
  --slate-500: #64748b;     /* neutral for reset/download */
  --slate-600: #475569;

  /* Focus ring based on --navy */
  --ring-blue: 0 0 0 3px rgba(11, 39, 73, .25);
}

/* Base: apply to button, anchor, and label used as a button */
.btn,
button.btn,
a.btn,
label.btn{
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  padding: .72rem 1.15rem;
  border-radius: 9999px; /* pill */
  border: 0;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--text-base);
  line-height: 1;

  cursor: pointer;
  user-select: none;
  text-decoration: none;

  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;

  color: var(--white);
  background: var(--ink); /* fallback — variants override */
  box-shadow: var(--shadow-1);
}

.btn:hover,
button.btn:hover,
a.btn:hover,
label.btn:hover{
  transform: translateY(-1px);
}

.btn:active,
button.btn:active,
a.btn:active,
label.btn:active{
  transform: translateY(0);
  filter: brightness(.96);
}

.btn:focus-visible,
button.btn:focus-visible,
a.btn:focus-visible,
label.btn:focus-visible{
  outline: none;
  box-shadow: var(--ring-blue), var(--shadow-2);
}

.btn:disabled,
button.btn:disabled,
a.btn.disabled,
label.btn.disabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sizes */
.btn-sm{ padding: .5rem .9rem; font-size: var(--text-sm); }
.btn-lg{ padding: .9rem 1.35rem; font-size: var(--text-lg); }

/* Icons in buttons */
.btn .icon{ width: 1.1em; height: 1.1em; }

/* -------- Explicit Variants (optional) -------- */

/* Primary (Navy) — submit/confirm/update/register/search/upload/calc */
.is-primary{
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
  box-shadow: 0 6px 16px rgba(11, 39, 73, .35);
}
.is-primary:hover{ filter: brightness(1.06); }

/* Danger (Red) — cancel/delete */
.is-danger{
  background: linear-gradient(180deg, var(--red) 0%, var(--red-dark) 100%);
  box-shadow: 0 6px 16px rgba(193, 18, 31, .35);
}
.is-danger:hover{ filter: brightness(1.06); }

/* Neutral (Slate) — reset/download/choose-file/secondary */
.is-neutral{
  background: linear-gradient(180deg, var(--slate-500) 0%, var(--slate-600) 100%);
  box-shadow: 0 6px 16px rgba(71, 85, 105, .35);
}
.is-neutral:hover{ filter: brightness(1.06); }

/* Outline utility (pair with a color via currentColor) */
.is-outline{
  background: transparent !important;
  color: inherit !important;
  border: 2px solid currentColor !important;
  box-shadow: none !important;
}
.is-outline.is-primary{ color: var(--navy); }
.is-outline.is-danger{  color: var(--red); }
.is-outline.is-neutral{ color: var(--slate-600); }

/* -------- Attribute Auto-Mapping --------
   Use data-action to set color automatically:
   cancel|delete|reset|download|choose|upload|register|search|calculate|confirm|submit|update
*/
.btn[data-action="cancel"],
button.btn[data-action="cancel"],
a.btn[data-action="cancel"],
label.btn[data-action="cancel"],
.btn[data-action="delete"],
button.btn[data-action="delete"],
a.btn[data-action="delete"],
label.btn[data-action="delete"]{
  background: linear-gradient(180deg, var(--red) 0%, var(--red-dark) 100%);
  box-shadow: 0 6px 16px rgba(193, 18, 31, .35);
}

.btn[data-action="reset"],
button.btn[data-action="reset"],
a.btn[data-action="reset"],
label.btn[data-action="reset"],
.btn[data-action="download"],
button.btn[data-action="download"],
a.btn[data-action="download"],
label.btn[data-action="download"],
.btn[data-action="choose"],
button.btn[data-action="choose"],
a.btn[data-action="choose"],
label.btn[data-action="choose"]{
  background: linear-gradient(180deg, var(--slate-500) 0%, var(--slate-600) 100%);
  box-shadow: 0 6px 16px rgba(71, 85, 105, .35);
}

.btn[data-action="upload"],
button.btn[data-action="upload"],
a.btn[data-action="upload"],
label.btn[data-action="upload"],
.btn[data-action="register"],
button.btn[data-action="register"],
a.btn[data-action="register"],
label.btn[data-action="register"],
.btn[data-action="search"],
button.btn[data-action="search"],
a.btn[data-action="search"],
label.btn[data-action="search"],
.btn[data-action="calculate"],
button.btn[data-action="calculate"],
a.btn[data-action="calculate"],
label.btn[data-action="calculate"],
.btn[data-action="confirm"],
button.btn[data-action="confirm"],
a.btn[data-action="confirm"],
label.btn[data-action="confirm"],
.btn[data-action="submit"],
button.btn[data-action="submit"],
a.btn[data-action="submit"],
label.btn[data-action="submit"],
.btn[data-action="update"],
button.btn[data-action="update"],
a.btn[data-action="update"],
label.btn[data-action="update"]{
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
  box-shadow: 0 6px 16px rgba(11, 39, 73, .35);
}

/* Group utility */
.btn-group{ display:flex; flex-wrap:wrap; gap: var(--space-3); }

/* File input helper (for "Choose File" buttons) */
.input-file{
  position: relative; display:inline-flex; align-items:center;
}
.input-file input[type="file"]{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}