/* Civic Modern — shared interaction states.
   Applied via class names on components; variables set inline so tokens flow through. */

/* ────── BUTTONS ────── */
.cm-btn {
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.cm-btn:focus-visible {
  outline: 2px solid #D63600;
  outline-offset: 2px;
}
.cm-btn:disabled:hover {
  background: var(--cm-bg) !important;
  color: var(--cm-fg) !important;
  border-color: var(--cm-border) !important;
}
.cm-btn[data-variant="primary"]:hover:not(:disabled) {
  background: #B02C00 !important;
}
.cm-btn[data-variant="secondary"]:hover:not(:disabled) {
  background: #FAFAF8 !important;
  border-color: #111113 !important;
}
.cm-btn[data-variant="tertiary"]:hover:not(:disabled),
.cm-btn[data-variant="ghost"]:hover:not(:disabled) {
  background: #F4F3EF !important;
}
.cm-btn[data-variant="link"]:hover:not(:disabled) {
  color: #B02C00 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cm-btn[data-variant="destructive"]:hover:not(:disabled),
.cm-btn[data-variant="danger"]:hover:not(:disabled) {
  background: #8E1B10 !important;
}

/* ────── FORM FIELDS ────── */
.cm-input,
.cm-textarea,
.cm-select {
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.cm-input:hover:not(:focus):not([data-invalid="true"]),
.cm-textarea:hover:not(:focus),
.cm-select:hover:not(:focus) {
  border-color: #111113 !important;
}
.cm-input:focus,
.cm-textarea:focus,
.cm-select:focus {
  border-color: #D63600 !important;
  box-shadow: 0 0 0 1px #D63600 !important;
}
.cm-input[data-invalid="true"]:focus {
  border-color: #B42318 !important;
  box-shadow: 0 0 0 1px #B42318 !important;
}

/* ────── CHECKBOX / RADIO / SWITCH ────── */
.cm-check-label:hover .cm-check-box,
.cm-check-label:hover .cm-radio-box {
  border-color: #111113;
}
.cm-check-label:hover .cm-check-box[data-checked="true"],
.cm-check-label:hover .cm-radio-box[data-checked="true"] {
  border-color: #B02C00;
  background: #B02C00;
}
.cm-check-label:hover .cm-switch-track[data-checked="false"] {
  background: #9A9A9E;
}
.cm-check-label:hover .cm-switch-track[data-checked="true"] {
  background: #B02C00;
}
/* Focus rings — native input is visually hidden and sits after the painted
   shape, so we match it via :has() on the label and ring the shape itself. */
.cm-check-label:has(.cm-check-native:focus-visible) .cm-check-box {
  outline: 2px solid #D63600;
  outline-offset: 3px;
  border-radius: 4px;
}
.cm-check-label:has(.cm-check-native:focus-visible) .cm-radio-box {
  outline: 2px solid #D63600;
  outline-offset: 3px;
  border-radius: 999px;
}
.cm-check-label:has(.cm-check-native:focus-visible) .cm-switch-track {
  outline: 2px solid #D63600;
  outline-offset: 3px;
  border-radius: 999px;
}

/* ────── SERVICE CARD ────── */
.cm-service-card {
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.cm-service-card:hover {
  border-color: #111113 !important;
  background: #FAFAF8 !important;
}
.cm-service-card:focus-visible {
  outline: 2px solid #D63600;
  outline-offset: 2px;
}

/* ────── TABS ────── */
.cm-tab {
  transition: color 120ms ease, border-color 120ms ease;
}
.cm-tab:hover:not([data-active="true"]) {
  color: #111113 !important;
  border-bottom-color: #D6D3CC !important;
}
.cm-tab:focus-visible {
  outline: 2px solid #D63600;
  outline-offset: -2px;
}

/* ────── SIDEBAR NAV ────── */
.cm-nav-link {
  transition: background 120ms ease, color 120ms ease;
}
.cm-nav-link:hover:not([data-active="true"]) {
  background: #F4F3EF !important;
  color: #111113 !important;
}
.cm-nav-link:focus-visible {
  outline: 2px solid #D63600;
  outline-offset: -2px;
}

/* ────── BREADCRUMBS ────── */
.cm-breadcrumb {
  color: #6B6B70;
  font-weight: 400;
  text-decoration: none;
  transition: color 120ms ease;
}
.cm-breadcrumb:hover,
.cm-breadcrumb:focus-visible {
  color: #D63600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #D63600;
}
.cm-breadcrumb:focus-visible {
  outline: 2px solid #D63600;
  outline-offset: 2px;
  border-radius: 2px;
}