/* Component styles from the brand guide's "Component styles" block.
   Requires tokens.css and a .theme-<brand> class on an ancestor. Follows use-wc native element styles. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 6px 16px; box-sizing: border-box;
  border-radius: var(--radius-control); border: 1px solid #E1E1E1;
  font: 500 14px/1.5 var(--font-body);
  background: #FFFFFF; color: #4F5259;                 /* default / secondary (e.g. Cancel) */
  box-shadow: 0 1px 2px rgba(31, 34, 39, 0.08);
  cursor: pointer;
}
.dark .btn, .btn.dark { background: #111316; color: #E1E4E8; border-color: #323438; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }

.btn-primary { background: var(--primary-solid); color: var(--primary-on); border-color: var(--primary-solid-border); box-shadow: var(--primary-solid-shadow); }
.btn-danger  { background: var(--danger-solid);  color: var(--danger-on);  border-color: var(--danger-solid-border);  box-shadow: var(--danger-solid-shadow); }

/* Links: primary ink, semibold, faded underline (30% light / 50% dark), 2px offset */
a { color: var(--primary-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); }
.dark a { text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }

/* Focus: 1px border + 2px outline in the primary color, flush (no gap) */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border: 1px solid var(--primary-solid); outline: var(--focus-ring-width) solid var(--primary-solid); outline-offset: 0;
}
.btn:focus-visible, a:focus-visible { outline: var(--focus-ring-width) solid var(--primary-solid); outline-offset: 2px; }

/* Toggles and badges */
.toggle[aria-checked="true"] { background: var(--primary-solid); }
.badge { display: inline-flex; padding: 2px 9px; border-radius: 999px; font: 600 12px/1.5 var(--font-body);
         background: var(--primary-tint); color: var(--primary-ink); }

/* Alerts: tint background, solid left rule, ink title */
.alert { padding: 10px 12px; border-left: 4px solid; border-radius: 4px; font-size: 14px; }
.alert-success { background: var(--success-tint); border-left-color: var(--success-solid); }
.alert-alert   { background: var(--alert-tint);   border-left-color: var(--alert-solid); }
.alert-danger  { background: var(--danger-tint);  border-left-color: var(--danger-solid); }
.alert-success strong { color: var(--success-ink); }
.alert-alert strong   { color: var(--alert-ink); }
.alert-danger strong  { color: var(--danger-ink); }