/* ============================================================
   URBINO · BUTTON
   Atom. Token-driven; the world is set either by a parent class
   (.urbino-mgr / .urbino-cit) OR by a local world shortcut
   (.u-btn--mgr / .u-btn--cit) — both produce the same result.

   Apply: class="u-btn u-btn--{world}? u-btn--{variant} u-btn--{size}?"
   ============================================================ */

.u-btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--u-btn-gap);
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;

  /* Sizing — default = md */
  height: var(--u-btn-h-md);
  padding: 0 var(--u-btn-px-md);
  border-radius: var(--u-btn-radius-md);

  /* Typography */
  font-family: var(--u-font-sans);
  font-size: var(--u-btn-font-size-md);
  font-weight: var(--u-btn-font-weight);
  line-height: 1;
  letter-spacing: -0.005em;

  /* Box */
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;

  /* Motion */
  transition:
    background var(--u-dur-fast) var(--u-ease-out),
    border-color var(--u-dur-fast) var(--u-ease-out),
    color var(--u-dur-fast) var(--u-ease-out),
    transform 80ms var(--u-ease-out),
    box-shadow var(--u-dur-fast) var(--u-ease-out);

  /* Reset */
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.u-btn:focus { outline: none; }


/* ============================================================
   WORLD SHORTCUTS
   .u-btn--mgr is the default — declared here only for symmetry
   and to make code grep-able. .u-btn--cit locally re-declares
   the citizen world tokens so a single button can opt in without
   needing a .urbino-cit parent.
   ============================================================ */

.u-btn--mgr {
  /* Manager IS the :root default — no overrides needed.
     This selector exists as a marker. */
}

.u-btn--cit {
  --u-btn-h-md:        48px;
  --u-btn-h-lg:        56px;
  --u-btn-h-xl:        64px;
  --u-btn-radius-sm:   var(--u-radius-pill);
  --u-btn-radius-md:   var(--u-radius-pill);
  --u-btn-radius-lg:   var(--u-radius-pill);
  --u-btn-radius-xl:   var(--u-radius-pill);
  --u-btn-px-md:       var(--u-space-6);
  --u-btn-px-lg:       var(--u-space-7);
  --u-btn-px-xl:       var(--u-space-7);
  --u-btn-font-size-md: 16px;
  --u-btn-font-size-lg: 17px;
  --u-btn-font-size-xl: 18px;
  --u-btn-font-weight:  700;
  --u-btn-icon-size-md: 20px;
  --u-btn-icon-size-lg: 22px;
  --u-btn-icon-size-xl: 24px;
  --u-btn-press-transform: scale(0.98);
}


/* ============================================================
   SIZES
   Default is md (consumed by .u-btn root).
   Size modifiers redeclare the relevant tokens locally.
   ============================================================ */

.u-btn--sm {
  height: var(--u-btn-h-sm);
  padding: 0 var(--u-btn-px-sm);
  border-radius: var(--u-btn-radius-sm);
  font-size: var(--u-btn-font-size-sm);
  gap: var(--u-btn-gap-sm);
}

.u-btn--lg {
  height: var(--u-btn-h-lg);
  padding: 0 var(--u-btn-px-lg);
  border-radius: var(--u-btn-radius-lg);
  font-size: var(--u-btn-font-size-lg);
}

.u-btn--xl {
  height: var(--u-btn-h-xl);
  padding: 0 var(--u-btn-px-xl);
  border-radius: var(--u-btn-radius-xl);
  font-size: var(--u-btn-font-size-xl);
}


/* ============================================================
   VARIANTS — primary / secondary / ghost / danger
   ============================================================ */

/* primary — solid brand */
.u-btn--primary               { background: var(--u-primary);  color: var(--u-fg-inv); }
.u-btn--primary:hover,
.u-btn--primary.is-hover      { background: var(--u-primary-hover); }
.u-btn--primary:active,
.u-btn--primary.is-press      { background: var(--u-primary-press); }

/* secondary — surface, slate border */
.u-btn--secondary             { background: var(--u-surface); color: var(--u-fg-1); border-color: var(--u-border); }
.u-btn--secondary:hover,
.u-btn--secondary.is-hover    { background: var(--u-surface-alt); border-color: var(--u-border-strong); }
.u-btn--secondary:active,
.u-btn--secondary.is-press    { background: var(--u-surface-sunk); border-color: var(--u-border-strong); }

/* ghost — transparent, label-only */
.u-btn--ghost                 { background: transparent; color: var(--u-slate-700); }
.u-btn--ghost:hover,
.u-btn--ghost.is-hover        { background: var(--u-surface-sunk); color: var(--u-fg-1); }
.u-btn--ghost:active,
.u-btn--ghost.is-press        { background: var(--u-slate-200); }

/* danger — solid red, ONLY for destructive confirmation */
.u-btn--danger                { background: var(--u-red-500);  color: var(--u-fg-inv); }
.u-btn--danger:hover,
.u-btn--danger.is-hover       { background: var(--u-red-700); }
.u-btn--danger:active,
.u-btn--danger.is-press       { background: #991B1B; }


/* ============================================================
   FOCUS — keyboard only (focus-visible)
   Ring size differs per world via --u-focus-ring (set in
   semantic.css for manager, overridden in world-cit.css).
   ============================================================ */

.u-btn:focus-visible,
.u-btn.is-focus            { box-shadow: var(--u-focus-ring); }
.u-btn--danger:focus-visible,
.u-btn--danger.is-focus    { box-shadow: var(--u-focus-ring-danger); }


/* ============================================================
   PRESS — citizen scales to 0.98, manager doesn't
   Civic tools don't bounce; the citizen scale is a soft tap-confirm.
   --u-btn-press-transform = none in manager, scale(0.98) in citizen.
   ============================================================ */

.u-btn:active,
.u-btn.is-press               { transform: var(--u-btn-press-transform); }


/* ============================================================
   DISABLED — same shape across worlds
   ============================================================ */

.u-btn[disabled],
.u-btn--disabled {
  background: var(--u-surface-sunk);
  color: var(--u-fg-4);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}
.u-btn--secondary[disabled],
.u-btn--secondary.u-btn--disabled { background: var(--u-surface); border-color: var(--u-border); }
.u-btn--ghost[disabled],
.u-btn--ghost.u-btn--disabled     { background: transparent; }


/* ============================================================
   LOADING — spinner replaces label; button keeps width
   Use aria-busy="true" on the element, never disable.
   ============================================================ */

.u-btn--loading {
  color: transparent !important;
  position: relative;
  pointer-events: none;
}
.u-btn--loading > * { visibility: hidden; }
.u-btn--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--u-fg-inv);
  animation: u-btn-spin 600ms linear infinite;
}
.u-btn--secondary.u-btn--loading::after,
.u-btn--ghost.u-btn--loading::after { color: var(--u-fg-2); }
@keyframes u-btn-spin { to { transform: rotate(360deg); } }


/* ============================================================
   ICON USAGE
   Icon size scales with button size via --u-btn-icon-size-*.
   All icons are Lucide SVG via <img> or <svg>, currentColor stroke.
   ============================================================ */

.u-btn img,
.u-btn svg { display: block; flex-shrink: 0; width: var(--u-btn-icon-size-md); height: var(--u-btn-icon-size-md); }

.u-btn--sm img,
.u-btn--sm svg { width: var(--u-btn-icon-size-sm); height: var(--u-btn-icon-size-sm); }

.u-btn--lg img,
.u-btn--lg svg { width: var(--u-btn-icon-size-lg); height: var(--u-btn-icon-size-lg); }

.u-btn--xl img,
.u-btn--xl svg { width: var(--u-btn-icon-size-xl); height: var(--u-btn-icon-size-xl); }

/* Icon-only — square, no horizontal padding */
.u-btn--icon-only         { padding: 0; width: var(--u-btn-h-md); }
.u-btn--icon-only.u-btn--sm { width: var(--u-btn-h-sm); }
.u-btn--icon-only.u-btn--lg { width: var(--u-btn-h-lg); }
.u-btn--icon-only.u-btn--xl { width: var(--u-btn-h-xl); }

/* Filter helper — invert white icons for primary/danger variants
   when using <img src="...lucide..."> (single-color SVGs). */
.u-btn--primary img,
.u-btn--danger img { filter: brightness(0) invert(1); }
.u-btn--primary:disabled img,
.u-btn--danger:disabled img,
.u-btn--disabled img { filter: none; opacity: 0.6; }


/* ============================================================
   BLOCK — full-width, common on citizen mobile
   ============================================================ */

.u-btn--block { width: 100%; }