/* ============================================================
   StackForBrands — Core component styles
   Buttons, tags, badges, rating, cards.
   ============================================================ */

/* ---------------- Button ---------------------------------- */
.sfb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-s);
  line-height: 1;
  letter-spacing: var(--ls-snug);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.sfb-btn:hover { background: var(--btn-primary-bg-hover); }
.sfb-btn:active { background: var(--btn-primary-bg-press); transform: translateY(1px); }
.sfb-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.sfb-btn--accent {
  background: var(--btn-accent-bg);
  color: var(--btn-accent-fg);
  box-shadow: var(--shadow-sm);
}
.sfb-btn--accent:hover { background: var(--btn-accent-bg-hover); }
.sfb-btn--accent:active { background: var(--btn-accent-bg-press); }

.sfb-btn--secondary {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--border);
}
.sfb-btn--secondary:hover { background: var(--paper-sunk); }
.sfb-btn--secondary:active { background: var(--line-200); }

.sfb-btn--ghost {
  background: transparent;
  color: var(--text-strong);
}
.sfb-btn--ghost:hover { background: var(--paper-sunk); }
.sfb-btn--ghost:active { background: var(--line-200); }

.sfb-btn--link {
  background: transparent;
  color: var(--link);
  padding: 0; border: 0; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--link) 40%, transparent);
}
.sfb-btn--link:hover { background: transparent; color: var(--link-hover); transform: none; }

.sfb-btn--sm { padding: 8px 14px; font-size: var(--fs-caption); }
.sfb-btn--lg { padding: 16px 28px; font-size: var(--fs-body); border-radius: var(--radius-md); }
.sfb-btn--block { display: flex; width: 100%; }
.sfb-btn[disabled], .sfb-btn[aria-disabled="true"] {
  opacity: 0.45; pointer-events: none;
}
.sfb-btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* ---------------- Tag (category pill) --------------------- */
.sfb-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--paper-sunk);
  color: var(--text-body);
  border: 1px solid var(--border-soft);
  white-space: nowrap;
}
.sfb-tag--brand { background: var(--brand-soft); color: var(--green-800); border-color: transparent; }
.sfb-tag--accent { background: var(--accent-soft); color: var(--amber-700); border-color: transparent; }
.sfb-tag--solid { background: var(--green-800); color: var(--text-on-dark); border-color: transparent; }
.sfb-tag__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.sfb-tag--interactive { cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.sfb-tag--interactive:hover { background: var(--green-100); border-color: transparent; }
.sfb-tag[aria-pressed="true"] { background: var(--green-800); color: var(--text-on-dark); border-color: transparent; }

/* ---------------- Badge ----------------------------------- */
.sfb-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  padding: 4px 9px;
  border-radius: var(--radius-xs);
  background: var(--paper-sunk);
  color: var(--text-muted);
}
.sfb-badge--success { background: var(--success-100); color: var(--success-600); }
.sfb-badge--warning { background: var(--warning-100); color: var(--warning-600); }
.sfb-badge--danger  { background: var(--danger-100);  color: var(--danger-600); }
.sfb-badge--info    { background: var(--info-100);    color: var(--info-600); }
.sfb-badge--pick    { background: var(--green-800);   color: var(--amber-300); } /* "notre choix" */

/* ---------------- Rating stars ---------------------------- */
.sfb-rating { display: inline-flex; align-items: center; gap: var(--space-2); }
.sfb-rating__stars { position: relative; display: inline-block; font-size: 1em; line-height: 1; white-space: nowrap; }
.sfb-rating__bg { color: var(--star-off); letter-spacing: 2px; }
.sfb-rating__fg {
  position: absolute; inset: 0; overflow: hidden;
  color: var(--star-on); letter-spacing: 2px; white-space: nowrap;
}
.sfb-rating__value {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-weight: var(--fw-medium);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.sfb-rating__value small { color: var(--text-faint); font-weight: var(--fw-regular); }

/* ---------------- Card ------------------------------------ */
.sfb-card {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--ring-hairline), var(--shadow-sm);
  padding: var(--space-6);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.sfb-card--interactive { cursor: pointer; }
.sfb-card--interactive:hover { box-shadow: var(--ring-hairline), var(--shadow-lg); transform: translateY(-2px); }
.sfb-card--flat { box-shadow: var(--ring-hairline); }
.sfb-card--sunk { background: var(--bg-sunk); box-shadow: none; border: 1px solid var(--border-soft); }
.sfb-card--inverse { background: var(--green-800); color: var(--text-on-dark); box-shadow: var(--shadow-lg); }
.sfb-card--inverse :is(h1,h2,h3,h4) { color: var(--text-on-dark); }