/*
 * SOUS Service App — reusable primitives
 *
 * Primitives are intentionally class-based. They can be adopted incrementally
 * without changing the structure or behavior of the existing prototype.
 */

.svc-heading,
.svc-body,
.svc-label,
.svc-caption,
.svc-button,
.svc-badge,
.svc-field {
  font-family: var(--svc-font-family);
}

.svc-heading {
  margin: 0;
  color: var(--svc-color-text);
  font-size: var(--svc-type-section-title-size);
  font-weight: var(--svc-type-section-title-weight);
  line-height: var(--svc-type-section-title-line-height);
  letter-spacing: var(--svc-type-section-title-tracking);
  text-wrap: balance;
}

.svc-body {
  margin: 0;
  color: var(--svc-color-text);
  font-size: var(--svc-type-body-size);
  font-weight: var(--svc-type-body-weight);
  line-height: var(--svc-type-body-line-height);
  letter-spacing: var(--svc-type-body-tracking);
  text-wrap: pretty;
}

.svc-label {
  color: var(--svc-color-text-muted);
  font-size: var(--svc-type-label-size);
  font-weight: var(--svc-type-label-weight);
  line-height: var(--svc-type-label-line-height);
  letter-spacing: var(--svc-type-label-tracking);
}

.svc-caption {
  color: var(--svc-color-text-secondary);
  font-size: var(--svc-type-caption-size);
  font-weight: var(--svc-type-caption-weight);
  line-height: var(--svc-type-caption-line-height);
  letter-spacing: var(--svc-type-caption-tracking);
}

.svc-type-display,
.svc-type-page-title,
.svc-type-heading,
.svc-type-panel-title,
.svc-type-section-title,
.svc-type-metric,
.svc-type-data,
.svc-type-body-large,
.svc-type-body,
.svc-type-control,
.svc-type-label,
.svc-type-support,
.svc-type-status,
.svc-type-utility,
.svc-type-caption,
.svc-type-micro {
  margin: 0;
  font-family: var(--svc-font-family);
}

.svc-type-display {
  font-size: var(--svc-type-display-size);
  font-weight: var(--svc-type-display-weight);
  line-height: var(--svc-type-display-line-height);
  letter-spacing: var(--svc-type-display-tracking);
}

.svc-type-page-title {
  font-size: var(--svc-type-page-title-size);
  font-weight: var(--svc-type-page-title-weight);
  line-height: var(--svc-type-page-title-line-height);
  letter-spacing: var(--svc-type-page-title-tracking);
}

.svc-type-heading {
  font-size: var(--svc-type-heading-size);
  font-weight: var(--svc-type-heading-weight);
  line-height: var(--svc-type-heading-line-height);
  letter-spacing: var(--svc-type-heading-tracking);
}

.svc-type-panel-title {
  font-size: var(--svc-type-panel-title-size);
  font-weight: var(--svc-type-panel-title-weight);
  line-height: var(--svc-type-panel-title-line-height);
  letter-spacing: var(--svc-type-panel-title-tracking);
}

.svc-type-section-title {
  font-size: var(--svc-type-section-title-size);
  font-weight: var(--svc-type-section-title-weight);
  line-height: var(--svc-type-section-title-line-height);
  letter-spacing: var(--svc-type-section-title-tracking);
}

.svc-type-metric {
  font-size: var(--svc-type-metric-size);
  font-weight: var(--svc-type-metric-weight);
  line-height: var(--svc-type-metric-line-height);
  letter-spacing: var(--svc-type-metric-tracking);
  font-variant-numeric: tabular-nums;
}

.svc-type-data {
  font-size: var(--svc-type-data-size);
  font-weight: var(--svc-type-data-weight);
  line-height: var(--svc-type-data-line-height);
  letter-spacing: var(--svc-type-data-tracking);
  font-variant-numeric: tabular-nums;
}

.svc-type-body-large {
  font-size: var(--svc-type-body-large-size);
  font-weight: var(--svc-type-body-large-weight);
  line-height: var(--svc-type-body-large-line-height);
  letter-spacing: var(--svc-type-body-large-tracking);
}

.svc-type-body {
  font-size: var(--svc-type-body-size);
  font-weight: var(--svc-type-body-weight);
  line-height: var(--svc-type-body-line-height);
  letter-spacing: var(--svc-type-body-tracking);
}

.svc-type-control {
  font-size: var(--svc-type-control-size);
  font-weight: var(--svc-type-control-weight);
  line-height: var(--svc-type-control-line-height);
  letter-spacing: var(--svc-type-control-tracking);
}

.svc-type-label {
  font-size: var(--svc-type-label-size);
  font-weight: var(--svc-type-label-weight);
  line-height: var(--svc-type-label-line-height);
  letter-spacing: var(--svc-type-label-tracking);
}

.svc-type-support {
  font-size: var(--svc-type-support-size);
  font-weight: var(--svc-type-support-weight);
  line-height: var(--svc-type-support-line-height);
  letter-spacing: var(--svc-type-support-tracking);
}

.svc-type-status {
  font-size: var(--svc-type-status-size);
  font-weight: var(--svc-type-status-weight);
  line-height: var(--svc-type-status-line-height);
  letter-spacing: var(--svc-type-status-tracking);
}

.svc-type-utility {
  font-size: var(--svc-type-utility-size);
  font-weight: var(--svc-type-utility-weight);
  line-height: var(--svc-type-utility-line-height);
  letter-spacing: var(--svc-type-utility-tracking);
}

.svc-type-caption {
  font-size: var(--svc-type-caption-size);
  font-weight: var(--svc-type-caption-weight);
  line-height: var(--svc-type-caption-line-height);
  letter-spacing: var(--svc-type-caption-tracking);
}

.svc-type-micro {
  font-size: var(--svc-type-micro-size);
  font-weight: var(--svc-type-micro-weight);
  line-height: var(--svc-type-micro-line-height);
  letter-spacing: var(--svc-type-micro-tracking);
}

/*
 * Weight policy:
 * - 400 for explanation and supporting copy
 * - 500 for most labels, values and controls
 * - 600 only for structural headings, compact badges and rare emphasis
 * - 700+ is not part of the Service App product language
 */

.svc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--svc-control-height-lg);
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--svc-radius-button);
  cursor: pointer;
  font-size: var(--svc-type-control-size);
  font-weight: var(--svc-type-control-weight);
  line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: scale var(--svc-duration-press) var(--svc-ease-standard);
}

.svc-button--primary {
  background: var(--svc-color-action-primary);
  color: var(--svc-color-text-inverse);
}

.svc-button--secondary {
  border: 1px solid var(--svc-color-border-strong);
  background: var(--svc-color-surface);
  color: var(--svc-color-text);
}

.svc-button:not(:disabled):active {
  scale: .97;
}

.svc-button--success {
  background: var(--svc-color-success);
  color: var(--svc-color-text-inverse);
}

.svc-button--danger {
  background: var(--svc-color-danger);
  color: var(--svc-color-text-inverse);
}

.svc-button:focus-visible,
.svc-field:focus-visible {
  outline: 3px solid var(--svc-color-focus);
  outline-offset: 2px;
}

.svc-button:disabled,
.svc-button[aria-disabled="true"] {
  background: var(--neutral-200);
  color: var(--neutral-500);
  cursor: default;
}

.svc-button--rounded { border-radius: 9999px; }
.svc-button--compact { min-height: var(--svc-control-height-md); padding-inline: var(--space-4); }
.svc-button--quiet {
  background: var(--svc-color-operational-fill);
  color: var(--svc-color-operational-text);
}
.svc-button--order-action {
  min-height: var(--svc-control-height-order-action);
  border-radius: var(--svc-radius-button);
  font-size: var(--svc-type-order-control-size);
  font-weight: var(--svc-type-order-control-weight);
  line-height: var(--svc-type-order-control-line-height);
}
.svc-button--full-width { width: 100%; }
.svc-icon-button {
  flex: 0 0 var(--svc-control-height-lg);
  width: var(--svc-control-height-lg);
  height: var(--svc-control-height-lg);
  min-width: var(--svc-control-height-lg);
  min-height: var(--svc-control-height-lg);
  padding: 0;
}

.svc-selection-target {
  display: grid;
  place-items: center;
  width: var(--svc-selection-target-size);
  height: var(--svc-selection-target-size);
  padding: 0;
  border: 1px solid var(--svc-color-operational-border);
  border-radius: var(--svc-radius-control);
  background: var(--svc-color-operational-surface);
  color: transparent;
  cursor: pointer;
  transition: scale var(--svc-duration-press) var(--svc-ease-standard);
}
.svc-selection-target[aria-pressed="true"],
.svc-selection-target.is-selected {
  border-color: var(--svc-color-operational-brand);
  background: var(--svc-color-operational-brand);
  color: var(--svc-color-text-inverse);
}
.svc-selection-target:not(:disabled):active { scale: .94; }

.svc-rail-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: var(--svc-rail-item-size);
  height: var(--svc-rail-item-size);
  padding: 0;
  border: 0;
  border-radius: var(--svc-radius-rail-item);
  background: transparent;
  color: var(--svc-color-icon);
  cursor: pointer;
}

.svc-switch {
  position: relative;
  flex: none;
  width: 72px;
  height: var(--svc-control-height-sm);
  padding: 0;
  border: 0;
  border-radius: var(--svc-radius-pill);
  background: var(--svc-color-fill-strong);
  cursor: pointer;
  transition: background-color var(--svc-duration-fast) var(--svc-ease-standard);
}

.svc-switch[aria-checked="true"] {
  background: var(--svc-color-action-primary);
}

.svc-switch > span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 34px;
  border-radius: var(--svc-radius-pill);
  background: var(--svc-color-surface);
  box-shadow: var(--svc-shadow-switch-knob);
  transition: left var(--svc-duration-fast) var(--svc-ease-standard);
}

.svc-switch[aria-checked="true"] > span {
  left: 35px;
}

.svc-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: 9999px;
  background: var(--svc-color-surface-subtle);
  color: var(--svc-color-text-secondary);
  font: 500 var(--svc-type-control-size)/1 var(--svc-font-family);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: scale .1s ease;
}

.svc-filter-chip[aria-pressed="true"],
.svc-filter-chip.is-active {
  background: var(--svc-color-action-primary);
  color: var(--svc-color-text-inverse);
}

.svc-filter-chip:not(:disabled):active { scale: .97; }

.svc-radio,
.svc-checkbox {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border: 2px solid var(--neutral-400);
  background: var(--svc-color-surface);
}

.svc-radio { border-radius: 50%; }
.svc-checkbox { border-radius: 6px; }
.svc-radio::after {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--svc-color-text);
}
.svc-checkbox::after {
  width: 9px;
  height: 5px;
  transform: translateY(-1px) rotate(-45deg);
  border-bottom: 2px solid var(--svc-color-text-inverse);
  border-left: 2px solid var(--svc-color-text-inverse);
}
.svc-radio::after,
.svc-checkbox::after {
  content: "";
  scale: 0;
  transition: scale .14s cubic-bezier(.22, 1, .36, 1);
}
.svc-radio[aria-checked="true"],
.svc-radio.is-checked { border-color: var(--svc-color-text); }
.svc-checkbox[aria-checked="true"],
.svc-checkbox.is-checked {
  border-color: var(--svc-color-text);
  background: var(--svc-color-text);
}
.svc-radio[aria-checked="true"]::after,
.svc-radio.is-checked::after,
.svc-checkbox[aria-checked="true"]::after,
.svc-checkbox.is-checked::after { scale: 1; }

.svc-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 68px;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--svc-radius-control);
  background: transparent;
  color: var(--svc-color-text-secondary);
  font: 500 var(--svc-type-label-size)/1.2 var(--svc-font-family);
  text-align: left;
  cursor: pointer;
}
.svc-menu-item.is-active,
.svc-menu-item[aria-current="page"] {
  background: var(--svc-color-surface-subtle);
  color: var(--svc-color-text);
}
.svc-menu-item__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
}

.svc-button svg {
  width: var(--svc-icon-md);
  height: var(--svc-icon-md);
  flex: none;
}

.svc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--svc-badge-height);
  padding: 0 var(--space-2_5);
  border-radius: var(--svc-radius-badge);
  background: var(--neutral-100);
  color: var(--neutral-700);
  font-size: var(--svc-type-caption-size);
  font-weight: var(--svc-type-caption-weight);
  line-height: 1;
  white-space: nowrap;
}

.svc-badge--info {
  background: var(--svc-color-info-surface);
  color: var(--svc-color-info);
}

.svc-badge--success {
  background: var(--svc-color-success-surface);
  color: var(--svc-color-success);
}

.svc-badge--warning {
  background: var(--svc-color-warning-surface);
  color: var(--svc-color-warning);
}

.svc-badge--danger {
  background: var(--svc-color-danger-surface);
  color: var(--svc-color-danger);
}

.svc-quantity {
  display: inline-grid;
  place-items: center;
  width: var(--svc-quantity-size);
  height: var(--svc-quantity-size);
  flex: 0 0 var(--svc-quantity-size);
  border: 1px solid var(--svc-color-border);
  border-radius: 9px;
  background: var(--svc-color-surface);
  color: var(--svc-color-text);
  font-size: var(--svc-type-status-size);
  font-weight: var(--svc-type-status-weight);
  font-variant-numeric: tabular-nums;
  line-height: var(--svc-type-status-line-height);
}

.svc-quantity--inline {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--space-1);
  width: auto;
  height: auto;
  flex-basis: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--svc-type-data-size);
  font-weight: var(--svc-type-data-weight);
  line-height: var(--svc-type-data-line-height);
  white-space: nowrap;
}

.svc-field {
  width: 100%;
  min-height: var(--svc-control-height-lg);
  padding: 0 var(--space-4);
  border: 1px solid var(--svc-color-border);
  border-radius: var(--svc-radius-control);
  background: var(--svc-color-surface);
  color: var(--svc-color-text);
  font-size: var(--svc-type-control-size);
  font-weight: var(--svc-type-control-weight);
  line-height: var(--svc-type-control-line-height);
}

.svc-field::placeholder {
  color: var(--svc-color-text-muted);
}