/**
 * Тема калькулятора под дизайн-систему.
 * Подключается после встроенных стилей HTML — цвета, шрифт, кнопки.
 *
 * Соответствие токенам из theme.css / globals.css:
 * - font: Wix Madefor Text (--font-wix-madefor-text)
 * - alpha (акцент): #ea486d / #c63758 / #ffe5ec
 * - text: #1a1a1a / #626b73 / #a2a7b0
 * - surfaces: #ffffff / #fafaff / #f0f0f6 / #e2e2eb
 * - stroke: #c5c8cf / #1a1a1a
 * - кнопки: primary = alpha, secondary/outline/success = secondary-black
 */

@font-face {
  font-family: 'Wix Madefor Text';
  src: url('./fonts/WixMadeforText/WixMadeforText-Regular.woff2') format('woff2');
  font-weight: 200 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Wix Madefor Text';
  src: url('./fonts/WixMadeforText/WixMadeforText-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Wix Madefor Text';
  src: url('./fonts/WixMadeforText/WixMadeforText-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Wix Madefor Text';
  src: url('./fonts/WixMadeforText/WixMadeforText-Bold.woff2') format('woff2');
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

body,
button,
input,
select,
textarea {
  font-family: 'Wix Madefor Text', sans-serif;
}

html,
body {
  background: transparent;
  padding: 0;
  overflow: hidden;
}

.container {
  background: #ffffff;
  box-shadow: 0 8px 30px rgba(26, 26, 26, 0.08);
}

.header {
  background: #f0f0f6; /* neutral-200 */
  color: #1a1a1a;
}

.badge {
  background: #e2e2eb;
  color: #1a1a1a;
}

.card {
  background: #fafaff;
  border-color: #e2e2eb;
}

.section-title,
.field label,
.radio-group label,
.action-card .title,
.summary-item .value,
.file-upload-area .text,
.info-block,
.info-block strong,
.barrier-name-clickable {
  color: #1a1a1a;
}

.step-indicator,
.field .hint,
.text-muted,
.text-small,
.action-card .desc,
.summary-item .label,
.summary-item .sub,
footer,
.file-upload-area .sub,
.click-hint,
.barrier-name-clickable .edit-hint {
  color: #626b73;
}

.field input,
.field select {
  border-color: #c5c8cf;
  background: #ffffff;
}

.field input:focus,
.field select:focus {
  border-color: #ea486d;
  box-shadow: 0 0 0 2px rgba(234, 72, 109, 0.2);
}

.field input[readonly] {
  background: #f0f0f6;
}

.radio-group input[type='radio'] {
  accent-color: #ea486d;
}

.result-box {
  background: #f0f0f6;
  color: #1a1a1a;
}

button {
  min-height: 40px;
  padding: 8px 20px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  transform: none;
}

button:hover {
  transform: none;
}

.btn-primary,
.btn-start-calc {
  background: #ea486d;
  border-color: #ea486d;
  color: #fafaff;
}

.btn-primary:hover,
.btn-start-calc:hover {
  background: #c63758;
  border-color: #c63758;
  color: #fafaff;
  transform: none;
}

.btn-secondary,
.btn-success,
.btn-outline {
  background: transparent;
  border-color: #c5c8cf;
  color: #1a1a1a;
}

.btn-secondary:hover,
.btn-success:hover,
.btn-outline:hover {
  background: transparent;
  border-color: #1a1a1a;
  color: #1a1a1a;
  transform: none;
}

.btn-danger {
  background: transparent;
  border-color: #c5c8cf;
  color: #e00000;
}

.btn-danger:hover {
  background: transparent;
  border-color: #e00000;
  color: #e00000;
  transform: none;
}

.tooltip-icon,
.tooltip-trigger,
.tooltip-trigger-big {
  background-color: #a2a7b0;
}

.tooltip-trigger:hover,
.tooltip-trigger-big:hover {
  background-color: #1a1a1a;
}

.tooltip-trigger:hover::after,
.tooltip-trigger-big:hover::after {
  background: #1a1a1a;
  color: #fafaff;
  box-shadow: 0 4px 12px rgba(26, 26, 26, 0.2);
}

.tooltip-trigger:hover::before {
  border-top-color: #1a1a1a;
}

.tooltip-trigger-big:hover::before {
  border-bottom-color: #1a1a1a;
}

.tooltip-popup {
  background: #1a1a1a;
  color: #fafaff;
  box-shadow: 0 4px 12px rgba(26, 26, 26, 0.2);
}

.tooltip-popup-arrow.above {
  border-top-color: #1a1a1a;
}

.tooltip-popup-arrow.below {
  border-bottom-color: #1a1a1a;
}

.action-card {
  background: #ffffff;
  border-color: #e2e2eb;
}

.action-card:hover {
  border-color: #ea486d;
  background: #fafaff;
  transform: none;
}

.summary-item {
  background: #fafaff;
  border-color: #e2e2eb;
}

.summary-item .value.highlight {
  color: #1a1a1a;
}

.action-list li {
  background: #fafaff;
  border-left-color: #ea486d;
}

.action-list li:hover,
.clickable-action:hover {
  background: #f0f0f6;
  border-left-color: #1a1a1a;
}

.action-list li .remove-btn {
  color: #e00000;
}

.action-list li .remove-btn:hover {
  color: #b80000;
}

.step-dot {
  background: #d3d4dc;
}

.step-dot.active {
  background: #ea486d;
}

.step-dot.done {
  background: #1a1a1a;
}

footer {
  background: #fafaff;
  border-top-color: #e2e2eb;
}

.file-upload-area {
  border-color: #c5c8cf;
  background: #fafaff;
}

.file-upload-area:hover {
  border-color: #ea486d;
  background: #ffe5ec;
}

.info-block {
  background: #f0f0f6;
  border-left-color: #ea486d;
}

.editing-mode {
  background: #ffe5ec !important;
  border-left-color: #ea486d !important;
}

.barrier-name-clickable {
  background: #ffe5ec;
  border-left-color: #ea486d;
}

.barrier-name-clickable:hover {
  background: #ff93ab;
  border-left-color: #ea486d;
}

/* Инлайн-цвета в разметке HTML */
#newCalcForm,
#loadFileForm {
  border-top-color: #e2e2eb !important;
}

#fileStatus {
  color: #626b73 !important;
}

#step5 .summary-item[style*='2c7a4d'],
#step5 .summary-item[style*='#2c7a4d'],
#step5 .summary-item[style*='#33a986'] {
  border-color: #1a1a1a !important;
}