.ts-button {
  display: inline-flex;
  min-height: var(--ts-control-height);
  align-items: center;
  justify-content: center;
  gap: var(--ts-space-2);
  padding: 0 var(--ts-space-4);
  color: var(--ts-color-brand-petroleum);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ts-radius-control);
  font-family: var(--ts-font-ui);
  font-size: var(--ts-text-sm);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--ts-transition-fast), background-color var(--ts-transition-fast), border-color var(--ts-transition-fast);
}

.ts-button--primary { color: #fff; background: var(--ts-color-brand-turquoise); }
.ts-button--primary:hover { background: #115b5d; }
.ts-button--commercial:hover { color: var(--ts-color-brand-petroleum); background: var(--ts-color-brand-coral); }
.ts-button--secondary { background: var(--ts-color-surface); border-color: var(--ts-color-border-strong); }
.ts-button--secondary:hover { border-color: var(--ts-color-brand-turquoise); }
.ts-button--tertiary { color: var(--ts-color-brand-turquoise); }
.ts-button--tertiary:hover { text-decoration: underline; }
.ts-button--danger { color: #fff; background: var(--ts-color-alarm); }
.ts-button:disabled,
.ts-button[aria-disabled="true"] { color: #7a888c; background: #e5ebe8; border-color: #e5ebe8; cursor: not-allowed; }

.ts-field { display: grid; gap: var(--ts-space-2); }
.ts-label { color: var(--ts-color-text); font-size: var(--ts-text-sm); font-weight: 600; }
.ts-control {
  width: 100%;
  min-height: var(--ts-control-height);
  padding: 0 var(--ts-space-3);
  color: var(--ts-color-text);
  background: var(--ts-color-surface);
  border: 1px solid var(--ts-color-border-strong);
  border-radius: var(--ts-radius-control);
  font-family: var(--ts-font-ui);
  font-size: var(--ts-text-md);
}
textarea.ts-control { min-height: 6rem; padding-block: var(--ts-space-3); resize: vertical; }
.ts-control:focus { outline: none; border-color: var(--ts-color-brand-turquoise); box-shadow: 0 0 0 3px rgb(23 110 112 / 14%); }
.ts-field__help { color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); }
.ts-field--error .ts-control { border-color: var(--ts-color-alarm); }
.ts-field--error .ts-field__help { color: var(--ts-color-alarm); font-weight: 600; }

.ts-card {
  padding: var(--ts-space-4);
  color: var(--ts-color-text);
  background: var(--ts-color-surface);
  border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-card);
  font-family: var(--ts-font-ui);
}
.ts-card--metric { border-left: 4px solid var(--ts-color-brand-turquoise); }
.ts-card--alarm { border-left-color: var(--ts-color-alarm); }
.ts-card--elevated { box-shadow: var(--ts-shadow-elevated); }
.ts-card__label { color: var(--ts-color-text-muted); font-size: var(--ts-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ts-card__value { display: block; margin-top: var(--ts-space-2); font: 700 2rem/1.2 var(--ts-font-data); }

.ts-table-wrap { overflow-x: auto; background: var(--ts-color-surface); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-card); }
.ts-table { width: 100%; min-width: 42rem; border-collapse: collapse; color: var(--ts-color-text); font-family: var(--ts-font-ui); }
.ts-table th,
.ts-table td { padding: var(--ts-space-3) var(--ts-space-4); text-align: left; border-bottom: 1px solid var(--ts-color-surface-secondary); }
.ts-table th { color: var(--ts-color-text-muted); background: #f8faf9; font-size: var(--ts-text-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.ts-table td { font-size: var(--ts-text-sm); }
.ts-table tbody tr:hover { background: #f8fbfa; }
.ts-table__data { font-family: var(--ts-font-data); font-variant-numeric: tabular-nums; }

.ts-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-2);
  padding: var(--ts-space-1) var(--ts-space-2);
  border-radius: var(--ts-radius-control);
  font-family: var(--ts-font-ui);
  font-size: var(--ts-text-xs);
  font-weight: 700;
}
.ts-status::before { width: 0.5rem; height: 0.5rem; content: ""; background: currentColor; border-radius: 50%; }
.ts-status--normal { color: var(--ts-color-normal); background: var(--ts-color-normal-bg); }
.ts-status--warning { color: var(--ts-color-warning); background: var(--ts-color-warning-bg); }
.ts-status--high { color: var(--ts-color-brand-coral); background: var(--ts-color-brand-coral-soft); }
.ts-status--alarm { color: var(--ts-color-alarm); background: var(--ts-color-alarm-bg); }
.ts-status--info { color: var(--ts-color-info); background: var(--ts-color-info-bg); }
.ts-status--paused { color: var(--ts-color-paused); background: var(--ts-color-paused-bg); }
.ts-status--inactive { color: var(--ts-color-inactive); background: var(--ts-color-inactive-bg); }

.ts-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ts-space-3);
  padding: var(--ts-space-4);
  color: var(--ts-color-info);
  background: var(--ts-color-info-bg);
  border: 1px solid currentColor;
  border-left-width: 4px;
  border-radius: var(--ts-radius-control);
  font-family: var(--ts-font-ui);
}
.ts-alert--normal { color: var(--ts-color-normal); background: var(--ts-color-normal-bg); }
.ts-alert--warning { color: var(--ts-color-warning); background: var(--ts-color-warning-bg); }
.ts-alert--alarm { color: var(--ts-color-alarm); background: var(--ts-color-alarm-bg); }
.ts-alert__title { margin: 0 0 var(--ts-space-1); color: inherit; font-size: var(--ts-text-sm); }
.ts-alert__text { margin: 0; color: var(--ts-color-text); font-size: var(--ts-text-sm); }

.ts-temperature { color: var(--ts-color-text); font: 700 1.75rem/1.2 var(--ts-font-data); font-variant-numeric: tabular-nums; }
.ts-temperature--compact { font-size: 1.125rem; }
.ts-temperature--alarm { color: var(--ts-color-alarm); }

.ts-editorial-title {
  margin: 0;
  color: var(--ts-color-brand-petroleum);
  font-family: var(--ts-font-display);
  font-size: clamp(2rem, 5vw, var(--ts-display-lg));
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.035em;
}
.ts-editorial-emphasis { box-shadow: inset 0 -0.28em var(--ts-color-brand-coral-soft); }

@media (max-width: 42rem) {
  .ts-button { width: 100%; }
}