/*
 * Buttons: Pressed Steel.
 * A key sitting on a thin 2px base. Hover brightens and deepens the shadow,
 * pressing sinks the key flush with its base.
 *
 * Markup:   <button class="btn btn--primary">Label</button>
 * Roles:    btn--primary (violet), btn--ink (navy), btn--secondary, btn--tertiary, btn--danger
 * Sizes:    btn--sm, (default md), btn--lg
 * Layout:   btn--block
 * States:   :hover, :focus-visible, :active, :disabled / [aria-disabled="true"], .is-loading
 *           .is-hover / .is-focus / .is-active freeze a state for documentation.
 * Requires: tokens.css
 */

.btn {
  /* Role palette, overridden by each role class */
  --btn-top: #2A4573;
  --btn-mid: var(--ink-3);
  --btn-bot: var(--ink);
  --btn-press-top: var(--ink);
  --btn-press-bot: #152A4D;
  --btn-text: #FFFFFF;
  --btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, .35);
  --btn-highlight: rgba(255, 255, 255, .18);
  --btn-ring: #06101E;
  --btn-edge: var(--ink-edge);
  --btn-glow: rgba(6, 16, 30, .45);
  --btn-press-shade: rgba(0, 0, 0, .40);
  --btn-disabled-bg: #3A4B64;
  --btn-disabled-text: rgba(255, 255, 255, .55);

  /* Size */
  --btn-height: 40px;
  --btn-pad: 18px;
  --btn-font: var(--text-md);
  --btn-radius: var(--radius-md);
  --btn-gap: 8px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  height: var(--btn-height);
  padding: 0 var(--btn-pad);
  margin-bottom: 2px; /* room for the base edge */
  border: 0;
  border-radius: var(--btn-radius);
  font-family: var(--font-sans);
  font-size: var(--btn-font);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  color: var(--btn-text);
  text-shadow: var(--btn-text-shadow);
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-mid) 45%, var(--btn-bot) 100%);
  box-shadow:
    inset 0 1px 0 var(--btn-highlight),
    0 0 0 1px var(--btn-ring),
    0 2px 0 var(--btn-edge),
    0 3px 0 1px rgba(6, 16, 30, .08),
    0 10px 18px -8px var(--btn-glow);
  transition:
    transform var(--duration-press) var(--ease-press),
    box-shadow var(--duration-press) ease,
    filter var(--duration-press) ease;
}

.btn svg { flex: none; transition: transform var(--duration-press) ease; }

/* Hover */
.btn:hover,
.btn.is-hover {
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 var(--btn-highlight),
    0 0 0 1px var(--btn-ring),
    0 2px 0 var(--btn-edge),
    0 3px 0 1px rgba(6, 16, 30, .08),
    0 14px 24px -8px var(--btn-glow);
}
.btn:hover svg,
.btn.is-hover svg { transform: translateX(2px); }

/* Keyboard focus */
.btn:focus-visible,
.btn.is-focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

/* Pressed: the key sinks onto its base */
.btn:active,
.btn.is-active {
  filter: none;
  transform: translateY(2px);
  background: linear-gradient(180deg, var(--btn-press-top), var(--btn-press-bot));
  box-shadow:
    inset 0 1px 2px var(--btn-press-shade),
    0 0 0 1px var(--btn-ring),
    0 0 0 var(--btn-edge),
    0 2px 4px -2px rgba(6, 16, 30, .30);
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  filter: none;
  transform: none;
  color: var(--btn-disabled-text);
  text-shadow: none;
  background: var(--btn-disabled-bg);
  box-shadow: 0 0 0 1px var(--btn-ring), 0 2px 0 var(--btn-ring);
}
.btn:disabled svg,
.btn[aria-disabled="true"] svg { transform: none; }

/* Loading: keeps its size, label hidden behind a spinner */
.btn.is-loading {
  color: transparent;
  text-shadow: none;
  pointer-events: none;
}
.btn.is-loading svg { opacity: 0; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--btn-text);
  border-right-color: transparent;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- Roles ---------- */

/* Primary: the one violet action per view */
.btn--primary {
  --btn-top: #9A82FF;
  --btn-mid: #8E72FF;
  --btn-bot: var(--violet-600);
  --btn-press-top: #6346E6;
  --btn-press-bot: #7458F2;
  --btn-text: #FFFFFF;
  --btn-text-shadow: 0 -1px 0 rgba(43, 24, 140, .45);
  --btn-highlight: rgba(255, 255, 255, .30);
  --btn-ring: var(--violet-800);
  --btn-edge: var(--violet-900);
  --btn-glow: rgba(106, 75, 240, .55);
  --btn-press-shade: rgba(35, 18, 120, .45);
  --btn-disabled-bg: #B7A9F5;
  --btn-disabled-text: rgba(255, 255, 255, .85);
}

/* Ink: default main action inside the product */
.btn--ink { /* uses the base palette */ }

/* Secondary: sits beside a main action */
.btn--secondary {
  --btn-top: #FFFFFF;
  --btn-mid: #FFFFFF;
  --btn-bot: #F1F4F8;
  --btn-press-top: #E6EAF1;
  --btn-press-bot: #EFF2F6;
  --btn-text: var(--ink);
  --btn-text-shadow: none;
  --btn-highlight: #FFFFFF;
  --btn-ring: rgba(11, 27, 51, .16);
  --btn-edge: #C3CAD6;
  --btn-glow: rgba(11, 27, 51, .18);
  --btn-press-shade: rgba(11, 27, 51, .14);
  --btn-disabled-bg: #F3F5F8;
  --btn-disabled-text: #9AA4B4;
}

/* Tertiary: low-emphasis actions like Review or Preview */
.btn--tertiary {
  --btn-top: #FAF8FF;
  --btn-mid: #F4F1FF;
  --btn-bot: #EAE4FF;
  --btn-press-top: #DDD4FF;
  --btn-press-bot: #E8E2FF;
  --btn-text: #4B30C9;
  --btn-text-shadow: none;
  --btn-highlight: rgba(255, 255, 255, .95);
  --btn-ring: rgba(91, 63, 214, .26);
  --btn-edge: var(--violet-300);
  --btn-glow: rgba(91, 63, 214, .24);
  --btn-press-shade: rgba(75, 48, 201, .22);
  --btn-disabled-bg: #F5F3FC;
  --btn-disabled-text: #A99DDB;
}

/* Danger: irreversible steps only (filings, creditor notices). Pair with a confirmation. */
.btn--danger {
  --btn-top: #EE5E68;
  --btn-mid: var(--red-500);
  --btn-bot: var(--red-600);
  --btn-press-top: #BC2631;
  --btn-press-bot: #D23A45;
  --btn-text: #FFFFFF;
  --btn-text-shadow: 0 -1px 0 rgba(90, 10, 18, .45);
  --btn-highlight: rgba(255, 255, 255, .26);
  --btn-ring: var(--red-700);
  --btn-edge: var(--red-900);
  --btn-glow: rgba(196, 42, 53, .45);
  --btn-press-shade: rgba(90, 10, 18, .45);
  --btn-disabled-bg: #E9A5AA;
  --btn-disabled-text: rgba(255, 255, 255, .85);
}

/* ---------- Sizes ---------- */
.btn--sm {
  --btn-height: 32px;
  --btn-pad: 12px;
  --btn-font: var(--text-sm);
  --btn-radius: var(--radius-sm);
  --btn-gap: 6px;
}
.btn--sm.is-loading::after { width: 13px; height: 13px; }
.btn--lg {
  --btn-height: 48px;
  --btn-pad: 22px;
  --btn-font: 16px;
  --btn-radius: var(--radius-lg);
}
.btn--block { display: flex; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg { transition: none; }
  .btn.is-loading::after { animation-duration: 2s; }
}