/* =========================================================================
   Standard components, built on tokens.css
   =========================================================================
   STATUS: preview only — not linked into any template yet. Badges replace
   the current single-color .pill; stat-tile is a refined .tile for numbers;
   toast is new (the app currently only has inline .flash banners); .tap
   is a utility that guarantees the 44x44px minimum touch target.
   ========================================================================= */

.badge{
  display:inline-flex; align-items:center; gap:.35em;
  font-size:.75rem; font-weight:600; line-height:1.6;
  padding:.15em .65em; border-radius:var(--radius-pill); white-space:nowrap;
}
.badge.success{background:var(--success-tint); color:var(--success)}
.badge.warning{background:var(--warning-tint); color:var(--warning)}
.badge.danger {background:var(--danger-tint);  color:var(--danger)}
.badge.info   {background:var(--info-tint);    color:var(--info)}
.badge.brand  {background:var(--brand-tint);   color:var(--brand)}
.badge.warm   {background:var(--warm-tint);    color:var(--warm)}
.badge.neutral{background:var(--neutral-100);  color:var(--muted)}

.stat-tile{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:var(--space-unit); display:flex; flex-direction:column; gap:.25rem;
  text-decoration:none; /* .stat-tile is also used as an <a> (e.g. desk home's "People" tile) */
}
a.stat-tile:hover{border-color:var(--brand)}
.stat-tile .value{font-family:var(--font-display); font-size:2rem; font-weight:600; color:var(--fg); line-height:1}
.stat-tile .label{font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.stat-tile.brand .value{color:var(--brand)}
.stat-tile.warm  .value{color:var(--warm)}

.toast{
  position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%);
  background:var(--fg); color:#fff; padding:.75rem 1.2rem; border-radius:var(--radius-md);
  box-shadow:var(--shadow-md); font-size:.9rem; display:flex; align-items:center; gap:.6rem;
  max-width:90vw; z-index:1000;
}
.toast.success{background:var(--success)}
.toast.danger {background:var(--danger)}
.toast.brand  {background:var(--brand)}

/* Guarantees a 44x44px minimum hit area (WCAG 2.5.5) on any inline
   control — icon buttons, small nav links, checkbox/toggle hit zones. */
.tap{min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center}

/* Buttons re-themed on the new brand tokens (same shape as the existing
   .btn — just pointed at --brand/--warm instead of --accent). Kept as a
   separate .btn2 name for the preview so nothing in the live app changes
   yet; if the palette is approved, .btn itself gets repointed instead of
   keeping two names. */
.btn2{display:inline-block; background:var(--brand); color:#fff; border:0; border-radius:var(--radius-sm);
  padding:.6rem 1.1rem; font:inherit; font-weight:600; cursor:pointer; text-decoration:none;}
.btn2.warm{background:var(--warm)}
.btn2.ghost{background:transparent; color:var(--brand); border:1px solid var(--line)}
.btn2.danger{background:var(--danger)}