/**
 * YouOnline24 Design Tokens
 * Только светлая тема. Корпоративная палитра.
 * CDN: https://cdn.youonline24.ru/design/v1/yo24-tokens.css
 */
:root {
  /* Корпоративные цвета */
  --yo24-color-primary: #5a189a;
  --yo24-color-accent: #5a189a;
  --yo24-color-secondary: #ff9e00;
  --yo24-color-black: #000000;
  --yo24-color-white: #ffffff;
  --yo24-color-bg: #f7f7f7;
  --yo24-color-surface: #ffffff;
  --yo24-color-text: #000000;
  --yo24-color-text-muted: #6c6c6c;
  --yo24-color-border: #e0e0e0;
  --yo24-color-link: #5a189a;
  --yo24-color-link-hover: #7b2cbf;

  /* Типографика */
  --yo24-font-sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --yo24-font-size-base: 16px;
  --yo24-font-size-sm: 0.875rem;
  --yo24-font-size-lg: 1.125rem;
  --yo24-line-height: 1.5;

  /* Сетка и отступы */
  --yo24-container-max: 960px;
  --yo24-spacing-xs: 0.25rem;
  --yo24-spacing-sm: 0.5rem;
  --yo24-spacing-md: 1rem;
  --yo24-spacing-lg: 1.5rem;
  --yo24-spacing-xl: 2rem;

  /* Скругления и тени */
  --yo24-radius: 8px;
  --yo24-radius-sm: 4px;
  --yo24-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --yo24-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);

  /* Кнопки */
  --yo24-btn-primary-bg: var(--yo24-color-primary);
  --yo24-btn-primary-text: var(--yo24-color-white);
  --yo24-btn-secondary-bg: var(--yo24-color-secondary);
  --yo24-btn-secondary-text: var(--yo24-color-black);

  /* Футер */
  --yo24-footer-bg: var(--yo24-color-bg);
  --yo24-footer-text: var(--yo24-color-text-muted);
  --yo24-footer-border: var(--yo24-color-border);
}

/* Базовые утилиты (опционально на странице продукта) */
.yo24-container {
  max-width: var(--yo24-container-max);
  margin-inline: auto;
  padding-inline: var(--yo24-spacing-md);
}

.yo24-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--yo24-spacing-sm) var(--yo24-spacing-lg);
  font-family: var(--yo24-font-sans);
  font-size: var(--yo24-font-size-base);
  border: none;
  border-radius: var(--yo24-radius);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.yo24-btn:hover {
  opacity: 0.9;
}

.yo24-btn--primary {
  background: var(--yo24-btn-primary-bg);
  color: var(--yo24-btn-primary-text);
}

.yo24-btn--secondary {
  background: var(--yo24-btn-secondary-bg);
  color: var(--yo24-btn-secondary-text);
}
