/* ==========================================================================
   brand-blue.css
   --------------------------------------------------------------------------
   Tinky brand utility classes. Loaded AFTER builder.css so brand-bearing
   primary CTAs (Add pill, primary modal buttons in future migrations) can
   opt into the brand-blue ramp without changing the legacy `.topbar-btn-
   primary` class — that one stays amber to preserve compatibility with
   any third-party builds / docs / screenshots that reference it.

   Token contract (declared in builder.css :root):
     --brand-blue        primary
     --brand-blue-dark   hover
     --brand-blue-light  focus ring / soft accent
     --brand-ink         deepest brand text
     --brand-bg-soft     tinted background panel

   LABEL: PILOT-READY. Hardware verify before PRODUCTION-READY.
   ========================================================================== */

/* Brand-bearing topbar pill. Sits next to .topbar-btn-outline /
   .topbar-btn-ghost / the legacy .topbar-btn-primary in the topbar.
   Wins over .topbar-btn-primary thanks to load order + matched
   specificity; opt-in only, never auto-applied. */
.topbar-btn-brand {
  background: var(--brand-blue);
  color: #fff;
  border: 0;
}
.topbar-btn-brand:hover {
  background: var(--brand-blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(25, 118, 210, 0.4);
}
.topbar-btn-brand:focus-visible {
  outline: 3px solid var(--brand-blue-light);
  outline-offset: 2px;
}
.topbar-btn-brand:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--brand-blue);
  box-shadow: none;
  transform: none;
}

/* Honor OS-level reduced-motion the same way the rest of the system
   does — flatten the lift but keep the color change. */
@media (prefers-reduced-motion: reduce) {
  .topbar-btn-brand:hover {
    transform: none;
    box-shadow: none;
  }
}