/*
 * Дизайн-токены и базовые стили виджета калькулятора «Савой».
 * Все классы и переменные с префиксом scc- (Savoy Catering Calculator),
 * чтобы не конфликтовать со стилями Tilda. Файл правит только задача каркаса.
 */

:root {
  /* Цвета: глубокий тёмный фон, латунь и золото, крем */
  --scc-color-bg: #14110f;
  --scc-color-bg-elevated: #1e1a17;
  --scc-color-surface: #262120;
  --scc-color-border: rgba(201, 164, 96, 0.28);
  --scc-color-gold: #c9a460;
  --scc-color-gold-light: #e2c585;
  --scc-color-gold-dark: #9c7a3c;
  --scc-color-cream: #f3ead9;
  --scc-color-cream-muted: rgba(243, 234, 217, 0.68);
  --scc-color-text: var(--scc-color-cream);
  --scc-color-text-muted: var(--scc-color-cream-muted);
  --scc-color-text-on-gold: #1a1510;
  --scc-color-success: #8fb68a;
  --scc-color-warning: #d9a85f;
  --scc-color-danger: #d47a6d;

  /* Шрифты: антиква в заголовках, гротеск в тексте */
  --scc-font-serif: "Playfair Display", "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --scc-font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --scc-font-size-xs: 12px;
  --scc-font-size-sm: 14px;
  --scc-font-size-md: 16px;
  --scc-font-size-lg: 20px;
  --scc-font-size-xl: 28px;
  --scc-font-size-2xl: 40px;
  --scc-line-height: 1.5;
  --scc-letter-spacing-caps: 0.12em;

  /* Отступы */
  --scc-space-1: 4px;
  --scc-space-2: 8px;
  --scc-space-3: 12px;
  --scc-space-4: 16px;
  --scc-space-5: 24px;
  --scc-space-6: 32px;
  --scc-space-7: 48px;
  --scc-space-8: 64px;

  /* Форма */
  --scc-radius-sm: 2px;
  --scc-radius-md: 4px;
  --scc-radius-pill: 999px;
  --scc-border: 1px solid var(--scc-color-border);
  --scc-border-accent: 1px solid var(--scc-color-gold);
  --scc-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --scc-shadow-gold: 0 0 0 1px var(--scc-color-gold), 0 8px 24px rgba(201, 164, 96, 0.18);

  /* Анимация и размеры */
  --scc-transition: 180ms ease;
  --scc-max-width: 1200px;
  --scc-control-height: 44px;
}

/* Корневой контейнер виджета */
.scc-widget {
  box-sizing: border-box;
  font-family: var(--scc-font-sans);
  font-size: var(--scc-font-size-md);
  line-height: var(--scc-line-height);
  color: var(--scc-color-text);
  background: var(--scc-color-bg-elevated);
  border: var(--scc-border);
  border-radius: var(--scc-radius-md);
  padding: var(--scc-space-5);
  -webkit-font-smoothing: antialiased;
}

.scc-widget *,
.scc-widget *::before,
.scc-widget *::after {
  box-sizing: inherit;
}

.scc-widget p {
  margin: 0 0 var(--scc-space-3);
}

/* Типографика */
.scc-title,
.scc-heading {
  font-family: var(--scc-font-serif);
  font-weight: 500;
  color: var(--scc-color-gold-light);
  margin: 0 0 var(--scc-space-3);
}

.scc-heading {
  font-size: var(--scc-font-size-xl);
}

.scc-title {
  font-size: var(--scc-font-size-lg);
}

.scc-caps {
  font-size: var(--scc-font-size-xs);
  letter-spacing: var(--scc-letter-spacing-caps);
  text-transform: uppercase;
  color: var(--scc-color-gold);
}

.scc-muted {
  color: var(--scc-color-text-muted);
  font-size: var(--scc-font-size-sm);
}

.scc-price {
  font-family: var(--scc-font-serif);
  font-size: var(--scc-font-size-2xl);
  color: var(--scc-color-gold-light);
  font-variant-numeric: tabular-nums;
}

/* Кнопки */
.scc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--scc-control-height);
  padding: 0 var(--scc-space-5);
  font-family: var(--scc-font-sans);
  font-size: var(--scc-font-size-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--scc-radius-sm);
  cursor: pointer;
  transition: background var(--scc-transition), color var(--scc-transition), border-color var(--scc-transition);
}

.scc-btn--primary {
  background: var(--scc-color-gold);
  color: var(--scc-color-text-on-gold);
  border: 1px solid var(--scc-color-gold);
}

.scc-btn--primary:hover {
  background: var(--scc-color-gold-light);
  border-color: var(--scc-color-gold-light);
}

.scc-btn--ghost {
  background: transparent;
  color: var(--scc-color-gold);
  border: var(--scc-border-accent);
}

.scc-btn--ghost:hover {
  background: rgba(201, 164, 96, 0.1);
}

/* Поля ввода */
.scc-input,
.scc-select {
  width: 100%;
  height: var(--scc-control-height);
  padding: 0 var(--scc-space-3);
  font-family: var(--scc-font-sans);
  font-size: var(--scc-font-size-md);
  color: var(--scc-color-text);
  background: var(--scc-color-surface);
  border: var(--scc-border);
  border-radius: var(--scc-radius-sm);
  outline: none;
  transition: border-color var(--scc-transition);
}

.scc-input:focus,
.scc-select:focus {
  border-color: var(--scc-color-gold);
}

.scc-label {
  display: block;
  margin-bottom: var(--scc-space-1);
  font-size: var(--scc-font-size-xs);
  letter-spacing: var(--scc-letter-spacing-caps);
  text-transform: uppercase;
  color: var(--scc-color-text-muted);
}

/* Плейсхолдер модуля (пока модуль не реализован) */
.scc-placeholder {
  border-style: dashed;
}

/* Разделитель в стиле рококо: тонкая линия с золотым ромбом */
.scc-divider {
  display: flex;
  align-items: center;
  gap: var(--scc-space-3);
  margin: var(--scc-space-5) 0;
  color: var(--scc-color-gold);
}

.scc-divider::before,
.scc-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--scc-color-border);
}