/* ─────────────────────────────────────────────────────────────────
   HR Blizz · Buttons
   Lifted verbatim from ui_kits/hr-blizz/styles.css — the canonical
   button system. Always link this file (after colors_and_type.css)
   when generating any HRB-branded UI; never hand-roll button styles.

   Required tokens from colors_and_type.css:
     --motion-fast, --motion-base, --motion-instant
     --ease-standard, --ease-spring, --ease-emphasized
     --font-body, --font-mono

   Usage:
     <link rel="stylesheet" href="colors_and_type.css" />
     <link rel="stylesheet" href="components/buttons.css" />

     <button class="btn btn-primary">Save</button>
     <button class="btn btn-secondary lg">Continue</button>
     <button class="btn btn-tonal">Ask AI</button>
     <button class="btn btn-tertiary">Cancel <span class="kbd">Esc</span></button>
     <button class="btn btn-ghost sm">Details</button>
     <button class="btn btn-danger">Delete</button>
     <button class="btn btn-primary shine">Save payroll</button>
     <button class="btn btn-primary is-loading"><span class="spinner"></span>Saving…</button>
   ───────────────────────────────────────────────────────────────── */

.btn {
  --hl: rgba(255,255,255,0.16);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 14px; height: 36px;
  border-radius: 8px;
  font: 600 13px/13px var(--font-body);
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 1px 0 var(--hl) inset, 0 1px 2px rgba(0,23,56,0.08);
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    transform var(--motion-fast) var(--ease-spring);
}

/* ── Variants ────────────────────────────────────────────── */
.btn-primary   { background: linear-gradient(180deg, #FF7445, #FF5F1F); color: #fff; }
.btn-primary:hover   { background: linear-gradient(180deg, #E25929, #CC4C19); transform: translateY(-1px); box-shadow: 0 1px 0 var(--hl) inset, 0 4px 8px -2px rgba(0,23,56,0.12); }
.btn-primary:active  { background: #993913; transform: scale(0.97); box-shadow: 0 1px 0 rgba(0,0,0,0.10) inset; transition-duration: var(--motion-instant); }

.btn-secondary { background: linear-gradient(180deg, #2A4F84, #1A3E6D); color: #fff; }
.btn-secondary:hover { background: linear-gradient(180deg, #1F457A, #133866); transform: translateY(-1px); box-shadow: 0 1px 0 var(--hl) inset, 0 4px 8px -2px rgba(0,23,56,0.12); }
.btn-secondary:active{ background: #03264F; transform: scale(0.97); transition-duration: var(--motion-instant); }

.btn-tonal     { --hl: transparent; background: #FFEFE9; color: #993913; box-shadow: none; }
.btn-tonal:hover     { background: #FFDFD2; box-shadow: 0 4px 8px -2px rgba(255,95,31,0.16); }
.btn-tonal:active    { background: #FFBFA5; transform: scale(0.97); transition-duration: var(--motion-instant); }

.btn-tertiary  { --hl: transparent; background: #fff; color: #1A3E6D; border-color: #B8C1D1; box-shadow: none; }
.btn-tertiary:hover  { background: #F7F9FB; border-color: #8B9AB2; box-shadow: 0 1px 2px rgba(0,23,56,0.06); }
.btn-tertiary:active { background: #F0F3F8; transform: scale(0.97); transition-duration: var(--motion-instant); }

.btn-ghost     { --hl: transparent; background: transparent; color: #1A3E6D; box-shadow: none; }
.btn-ghost:hover     { background: #F0F3F8; }
.btn-ghost:active    { background: #E3E6EC; transform: scale(0.97); transition-duration: var(--motion-instant); }

.btn-danger    { background: linear-gradient(180deg, #DC4242, #D22A2A); color: #fff; }
.btn-danger:hover    { background: linear-gradient(180deg, #BA2929, #A82222); transform: translateY(-1px); box-shadow: 0 1px 0 var(--hl) inset, 0 4px 8px -2px rgba(0,23,56,0.12); }
.btn-danger:active   { background: #7E1919; transform: scale(0.97); transition-duration: var(--motion-instant); }

/* ── Dark-bg variants (for hero/marketing dark canvases) ─── */
.btn-d-primary{background:linear-gradient(180deg,#FF7445,#FF5F1F);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 6px 14px -3px rgba(255,95,31,.30),0 18px 30px -10px rgba(255,95,31,.40);}
.btn-d-primary:hover{background:linear-gradient(180deg,#FF8458,#E25929);transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 10px 22px -4px rgba(255,95,31,.36),0 22px 36px -10px rgba(255,95,31,.50);}
.btn-d-primary:active{background:#CC4C19;transform:scale(.97);transition-duration:var(--motion-instant)}

.btn-d-white{background:#fff;color:#001738;
  box-shadow:0 1px 0 rgba(255,255,255,.40) inset,0 6px 14px -3px rgba(0,0,0,.30);}
.btn-d-white:hover{background:#F7F9FB;transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.40) inset,0 10px 22px -4px rgba(0,0,0,.36);}
.btn-d-white:active{background:#E3E6EC;transform:scale(.97);transition-duration:var(--motion-instant)}

.btn-d-glass{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 4px 12px -2px rgba(0,0,0,.30);}
.btn-d-glass:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);transform:translateY(-1px)}
.btn-d-glass:active{background:rgba(255,255,255,.04);transform:scale(.97);transition-duration:var(--motion-instant)}

.btn-d-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.30);box-shadow:none;--hl:transparent}
.btn-d-outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.50);transform:translateY(-1px)}
.btn-d-outline:active{background:rgba(255,255,255,.04);transform:scale(.97);transition-duration:var(--motion-instant)}

.btn-d-tonal{background:rgba(255,116,69,.16);color:#FFBFA5;border-color:rgba(255,116,69,.30);box-shadow:none;--hl:transparent}
.btn-d-tonal:hover{background:rgba(255,116,69,.22);border-color:rgba(255,116,69,.45);color:#FFDFD2;transform:translateY(-1px)}
.btn-d-tonal:active{background:rgba(255,116,69,.10);transform:scale(.97);transition-duration:var(--motion-instant)}

.btn-d-ghost{background:transparent;color:rgba(255,255,255,.85);box-shadow:none;--hl:transparent}
.btn-d-ghost:hover{background:rgba(255,255,255,.08);color:#fff;transform:none}
.btn-d-ghost:active{background:rgba(255,255,255,.04);transform:scale(.97);transition-duration:var(--motion-instant)}

.btn-d-primary .kbd,.btn-d-white .kbd{background:rgba(0,23,56,.08);color:#1A3E6D;box-shadow:inset 0 -1px 0 rgba(0,23,56,.12)}
.btn-d-glass .kbd,.btn-d-outline .kbd,.btn-d-ghost .kbd,.btn-d-tonal .kbd{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 -1px 0 rgba(0,0,0,.20)}

/* ── Sizes ───────────────────────────────────────────────── */
.btn.sm  { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
.btn.lg  { height: 42px; padding: 0 18px; font-size: 14px; border-radius: 10px; gap: 10px; }

/* ── Focus ring — matches the button's own family ── */
.btn:focus-visible { outline: none; box-shadow: 0 1px 0 var(--hl) inset, 0 0 0 2px #fff, 0 0 0 4px #FF5F1F; }
.btn-secondary:focus-visible { box-shadow: 0 1px 0 var(--hl) inset, 0 0 0 2px #fff, 0 0 0 4px #1A3E6D; }
.btn-danger:focus-visible    { box-shadow: 0 1px 0 var(--hl) inset, 0 0 0 2px #fff, 0 0 0 4px #D22A2A; }

/* ── Animated icons inside buttons ──────────────────────── */
.btn > i[data-lucide] { transition: transform var(--motion-base) var(--ease-emphasized); }
.btn:hover > i[data-lucide="arrow-right"]   { transform: translateX(3px); }
.btn:hover > i[data-lucide="arrow-up-right"]{ transform: translateX(2px) translateY(-2px); }
.btn:hover > i[data-lucide="plus"]          { transform: rotate(90deg); }
.btn:hover > i[data-lucide="download"]      { transform: translateY(2px); }
.btn:hover > i[data-lucide="sparkles"]      { transform: rotate(-12deg) scale(1.1); }

/* ── Shine sweep (opt-in via .shine, use only on key CTAs) ── */
.btn.shine::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.20) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 600ms var(--ease-emphasized);
}
.btn.shine:hover::before { transform: translateX(120%); }

/* ── Embedded keyboard hint ─────────────────────────────── */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 4px;
  font: 600 10px/1 var(--font-mono); letter-spacing: 0.02em;
  background: rgba(255,255,255,0.18); color: inherit;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12);
  opacity: 0.85;
}
.btn-tonal .kbd, .btn-tertiary .kbd, .btn-ghost .kbd {
  background: rgba(0,23,56,0.06); color: #3F587F;
  box-shadow: inset 0 -1px 0 rgba(0,23,56,0.10);
}

/* ── Loading spinner (morphs in place — replaces leading icon slot) ── */
.btn .spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.32);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  flex: none;
}
.btn-tonal .spinner, .btn-tertiary .spinner, .btn-ghost .spinner {
  border-color: rgba(0,23,56,0.16);
  border-top-color: #1A3E6D;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn.is-loading { pointer-events: none; }

/* ─────────────────────────────────────────────────────────
   Icon-only buttons (toolbar / actions)
   Use .iconbtn (NOT .btn) — single child SVG, square box.
   ───────────────────────────────────────────────────────── */
.iconbtn {
  width: 32px; height: 32px; padding: 0;
  box-sizing: border-box;
  display: grid; place-items: center;          /* dead-center the SVG */
  border-radius: 8px;
  background: #fff; color: #1A3E6D;
  border: 1px solid #E3E6EC;
  cursor: pointer;
  font-size: 0; line-height: 0;
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    transform var(--motion-fast) var(--ease-spring);
}
.iconbtn > svg { display: block; width: 16px; height: 16px; }
.iconbtn:hover { background: #F0F3F8; border-color: #B8C1D1; box-shadow: 0 1px 2px rgba(0,23,56,0.06); transform: translateY(-1px); }
.iconbtn:active { transform: scale(0.94); transition-duration: var(--motion-instant); }
.iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #FF5F1F; }
.iconbtn.sm { width: 28px; height: 28px; border-radius: 6px; }
.iconbtn.sm > svg { width: 14px; height: 14px; }
.iconbtn.lg { width: 40px; height: 40px; border-radius: 10px; }
.iconbtn.lg > svg { width: 18px; height: 18px; }
.iconbtn.filled { background: #FF5F1F; color: #fff; border-color: transparent;
                  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 4px 8px -2px rgba(255,95,31,0.30); }
.iconbtn.filled:hover { background: #CC4C19; }
.iconbtn.danger-ghost { color: #D22A2A; }
.iconbtn.danger-ghost:hover { background: #FAEAEA; border-color: #EDAAAA; color: #A82222; }

/* ─────────────────────────────────────────────────────────
   Floating action button
   ───────────────────────────────────────────────────────── */
.fab {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(180deg, #FF7445, #FF5F1F);
  color: #fff; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 18px -4px rgba(255,95,31,0.40);
  transition: transform var(--motion-base) var(--ease-spring), box-shadow var(--motion-medium) var(--ease-standard);
}
.fab:hover  { transform: scale(1.06) rotate(8deg); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 14px 24px -6px rgba(255,95,31,0.5); }
.fab:active { transform: scale(0.96); transition-duration: var(--motion-instant); }
.fab > svg  { transition: transform var(--motion-base) var(--ease-emphasized); }
.fab:hover > svg { transform: rotate(90deg); }

.fab-ext {
  height: 48px; padding: 0 18px 0 16px; border-radius: 24px; gap: 8px;
  background: linear-gradient(180deg, #FF7445, #FF5F1F); color: #fff;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center;
  font: 600 14px var(--font-body);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 18px -4px rgba(255,95,31,0.40);
  transition: transform var(--motion-fast) var(--ease-spring), box-shadow var(--motion-medium) var(--ease-standard);
}
.fab-ext:hover  { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 14px 24px -6px rgba(255,95,31,0.5); }
.fab-ext > svg  { transition: transform var(--motion-base) var(--ease-emphasized); }
.fab-ext:hover > svg { transform: rotate(90deg); }

/* ─────────────────────────────────────────────────────────
   Toggle group (segmented control)
   ───────────────────────────────────────────────────────── */
.toggle-group { display: inline-flex; background: #F0F3F8; border-radius: 9px; padding: 3px; gap: 2px; }
.toggle-group > button {
  border: none; background: transparent; color: #3F587F;
  font: 600 12px var(--font-body);
  padding: 6px 11px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.toggle-group > button:hover { color: #001738; }
.toggle-group > button.on {
  background: #fff; color: #001738;
  box-shadow: 0 1px 2px rgba(0,23,56,0.08), 0 1px 0 rgba(255,255,255,0.6) inset;
}

/* ─────────────────────────────────────────────────────────
   Connected button group
   ───────────────────────────────────────────────────────── */
.btn-group { display: inline-flex; border: 1px solid #B8C1D1; border-radius: 8px; overflow: hidden; background: #fff; }
.btn-group > button {
  border: none; background: #fff; color: #1A3E6D;
  font: 600 13px var(--font-body);
  padding: 0 12px; height: 34px; cursor: pointer;
  border-right: 1px solid #E3E6EC;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.btn-group > button:last-child { border-right: none; }
.btn-group > button:hover { background: #F7F9FB; }
.btn-group > button.on { background: #FFEFE9; color: #993913; }

/* ─────────────────────────────────────────────────────────
   Split button (primary action + dropdown trigger)
   ───────────────────────────────────────────────────────── */
.split { display: inline-flex; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,23,56,0.08); }
.split > .main {
  background: linear-gradient(180deg, #FF7445, #FF5F1F); color: #fff;
  border: none; font: 600 13px var(--font-body);
  padding: 0 14px; height: 34px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  border-right: 1px solid rgba(0,0,0,0.12);
  transition: background var(--motion-fast) var(--ease-standard);
}
.split > .main:hover { background: linear-gradient(180deg, #E25929, #CC4C19); }
.split > .chev {
  background: linear-gradient(180deg, #FF7445, #FF5F1F); color: #fff;
  border: none; cursor: pointer;
  width: 30px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--motion-fast) var(--ease-standard);
}
.split > .chev:hover { background: linear-gradient(180deg, #E25929, #CC4C19); }