/* RUNGEL — design tokens
   Одна система для магазина (WordPress, тема RUNGEL) и раздела «Стартовый разбор».
   Подключать до собственных стилей. */

:root {
  /* --- База --- */
  --rg-bg:            #F6F5F2; /* основной фон */
  --rg-bg-soft:       #FBFAF7; /* лонгриды, светлые секции */
  --rg-surface:       #FFFFFF; /* карточки, поля */
  --rg-surface-muted: #F1EFE9; /* заголовки таблиц, вторичные кнопки */
  --rg-ink:           #0D1411; /* основной текст, тёмные секции */
  --rg-ink-2:         #20291F;
  --rg-text:          #4A5148; /* абзацы */
  --rg-muted:         #6B7168; /* подписи */
  --rg-faint:         #8A8F86; /* мета, плейсхолдеры */
  --rg-line:          #E5E2DA; /* границы */
  --rg-line-soft:     #EDEAE3; /* разделители в таблицах */
  --rg-line-strong:   #D8D5CC; /* граница второстепенной кнопки и поля под курсором */
  --rg-line-hover:    #C9C6BD; /* граница чипа под курсором */
  --rg-disabled-bg:   #DCD9D1;
  --rg-disabled-ink:  #9A9F96;

  /* --- Бренд --- */
  --rg-taiga:         #123A2A; /* глубокий таёжно-зелёный */
  --rg-taiga-deep:    #0A241A;
  --rg-moss:          #2F7A4F; /* акцент действия */
  --rg-moss-light:    #8FCB9B; /* акцент на тёмном */
  --rg-gold:          #F2C14E; /* статус амбассадора */

  /* --- Вкусовые акценты --- */
  --rg-raspberry:     #C2184E;
  --rg-blueberry:     #5A44B8;
  --rg-seabuckthorn:  #E07A0C;
  --rg-cranberry:     #C0392B;
  --rg-ginger:        #D2A208;
  --rg-coffee:        #7A4B2A;
  --rg-taiga-coffee:  #3F2E1F;
  --rg-energy:        #2F7A4F;
  --rg-immune:        #5F8B3C;

  /* Служебные состояния */
  --rg-warn-bg:       #FDF6E7;
  --rg-warn-line:     #EBD9AE;
  --rg-warn-ink:      #5A4A20;
  --rg-error:         #C0392B;

  /* --- Типографика --- */
  --rg-font-display: 'Commissioner', system-ui, sans-serif; /* заголовки, кнопки, цены */
  --rg-font-text:    'Manrope', system-ui, sans-serif;      /* текст, составы, таблицы */
  --rg-font-mono:    'JetBrains Mono', ui-monospace, monospace; /* меты, % РСП, подписи */

  --rg-w-regular: 400;
  --rg-w-medium:  500;
  --rg-w-semi:    600;
  --rg-w-bold:    700;
  --rg-w-extra:   800;
  --rg-w-black:   900;

  --rg-h1: clamp(38px, 8vw, 80px);   /* uppercase, letter-spacing -.03em, line-height .96 */
  --rg-h2: clamp(24px, 3.4vw, 40px);
  --rg-h3: clamp(19px, 2.4vw, 27px);
  --rg-body-lg: 18px;
  --rg-body:    16px;
  --rg-body-sm: 14px;
  --rg-caption: 13px;
  --rg-mono:    11px; /* letter-spacing .07em, uppercase */

  /* --- Радиусы --- */
  --rg-r-xs: 8px;   /* чипы навигации */
  --rg-r-sm: 10px;  /* мелкие кнопки */
  --rg-r-md: 14px;  /* кнопки, поля */
  --rg-r-lg: 18px;  /* карточки */
  --rg-r-xl: 24px;  /* крупные блоки */
  --rg-r-pill: 100px;

  /* --- Тени --- */
  --rg-shadow-card:  0 14px 30px rgba(13, 20, 17, .12);
  --rg-shadow-lift:  0 18px 40px rgba(18, 58, 42, .25);
  --rg-shadow-float: 0 12px 28px rgba(18, 58, 42, .35);

  /* --- Отступы (шаг 4) --- */
  --rg-s-1: 4px;
  --rg-s-2: 8px;
  --rg-s-3: 12px;
  --rg-s-4: 16px;
  --rg-s-5: 22px;
  --rg-s-6: 32px;
  --rg-s-7: 48px;
  --rg-s-8: 72px;
  --rg-section: clamp(56px, 8vw, 96px); /* вертикальный ритм секций */
  /* Ритм внутри секции: под шапкой раздела, между блоками карточки товара.
     Меньше секционного, но заметно больше строчного — иначе смысловые
     куски слипаются между собой и читаются одним полотном. */
  --rg-block:   clamp(40px, 4.5vw, 64px);
  --rg-gutter:  clamp(16px, 4vw, 48px); /* поля страницы */

  /* --- Иконки --- */
  /* Векторы лежат прямо в токенах: их красит `currentColor` через маску,
     файлов и спрайтов проект не заводит. */
  --rg-icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E");

  /* --- Интерактив --- */
  --rg-tap-min: 44px;  /* минимальная зона нажатия */
  --rg-btn-h:   56px;  /* основная кнопка */
  --rg-ease:    .18s ease;
  --rg-focus:   0 0 0 3px rgba(47, 122, 79, .35);
}

/* --- Кнопки --- */
.rg-btn {
  font-family: var(--rg-font-display);
  font-weight: var(--rg-w-extra);
  font-size: var(--rg-body);
  min-height: var(--rg-btn-h);
  padding: 14px 28px;
  border: 0;
  /* Одна форма на все кнопки действия. Капсула в проекте уже была —
     у фильтров каталога, плавающей кнопки и кнопок блочной корзины;
     радиусы 10 и 14 у остальных делали набор разнобойным. */
  border-radius: var(--rg-r-pill);
  cursor: pointer;
  transition: background var(--rg-ease), transform var(--rg-ease), border-color var(--rg-ease);
}
/* У каждого состояния наведения цвет текста задан явно, даже когда он
   не меняется. Кнопки бывают ссылками, а у ссылок есть общий `a:hover` —
   без явного цвета он побеждал и красил надпись в тайгу: на тёмной кнопке
   текст пропадал совсем, на «Купить» становился нечитаемым. */

.rg-btn--primary { background: var(--rg-taiga); color: var(--rg-bg); }
.rg-btn--primary:hover { background: var(--rg-taiga-deep); color: var(--rg-bg); transform: translateY(-1px); }
.rg-btn--primary:active { transform: translateY(0); background: var(--rg-taiga-deep); }
.rg-btn--primary:focus-visible { outline: 0; box-shadow: var(--rg-focus); }
.rg-btn--primary:disabled { background: var(--rg-disabled-bg); color: var(--rg-disabled-ink); cursor: not-allowed; transform: none; }

.rg-btn--accent { background: var(--rg-moss); color: #FFF; }
.rg-btn--accent:hover { background: var(--rg-taiga); color: #FFF; }

.rg-btn--ghost { background: transparent; color: var(--rg-ink); border: 1.5px solid var(--rg-line-strong); }
.rg-btn--ghost:hover { border-color: var(--rg-taiga); color: var(--rg-ink); }

.rg-btn--onDark { background: var(--rg-bg); color: var(--rg-ink); }
.rg-btn--onDark:hover { background: var(--rg-surface); color: var(--rg-ink); transform: translateY(-1px); }

/* Кнопка «Купить» — компактный вариант основной, тем же цветом.
   Раньше она красилась вкусом товара: девять цветов в одном ряду каталога
   читались как девять разных действий. Вкус остался там, где он и нужен, —
   в подложке снимка, полоске линейки и значениях таблицы. */
.rg-btn--buy { background: var(--rg-taiga); color: var(--rg-bg); min-height: var(--rg-tap-min); padding: 11px 20px; font-size: var(--rg-caption); }
.rg-btn--buy:hover { background: var(--rg-taiga-deep); color: var(--rg-bg); }

/* --- Поля --- */
.rg-field {
  font-family: var(--rg-font-text);
  font-size: var(--rg-body);
  min-height: var(--rg-btn-h);
  padding: 16px 18px;
  background: var(--rg-surface);
  color: var(--rg-ink);
  border: 1.5px solid var(--rg-line);
  border-radius: var(--rg-r-md);
  width: 100%;
}
.rg-field::placeholder { color: var(--rg-faint); }
.rg-field:hover { border-color: var(--rg-line-strong); }
.rg-field:focus { outline: 0; border-color: var(--rg-moss); box-shadow: var(--rg-focus); }
.rg-field[aria-invalid='true'] { border-color: var(--rg-error); }

/* --- Чип-вариант ответа (бот и фильтры каталога) --- */
.rg-chip {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 18px 20px; min-height: 60px;
  font-family: var(--rg-font-text); font-weight: var(--rg-w-semi); font-size: var(--rg-body);
  background: var(--rg-bg); color: var(--rg-ink-2);
  border: 1.5px solid var(--rg-line); border-radius: var(--rg-r-md);
  text-align: left; cursor: pointer; transition: all .15s ease;
}
.rg-chip:hover { border-color: var(--rg-line-hover); color: var(--rg-ink); }
.rg-chip[aria-pressed='true'] { background: var(--rg-taiga); border-color: var(--rg-taiga); color: var(--rg-bg); }

/* --- Карточка товара --- */
.rg-card {
  display: flex; flex-direction: column;
  background: var(--rg-surface);
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-r-lg);
  overflow: hidden;
  transition: transform var(--rg-ease), box-shadow var(--rg-ease);
}
.rg-card:hover { transform: translateY(-3px); box-shadow: var(--rg-shadow-card); }
.rg-card__media { aspect-ratio: 5 / 4; background: var(--rg-flavor, var(--rg-taiga)); }

/* --- Нутриентная таблица --- */
.rg-table { width: 100%; border-collapse: collapse; background: var(--rg-surface); border: 1px solid var(--rg-line); border-radius: var(--rg-r-lg); overflow: hidden; }
.rg-table th { font-family: var(--rg-font-mono); font-size: var(--rg-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--rg-muted); background: var(--rg-surface-muted); padding: 12px 18px; text-align: left; }
.rg-table td { padding: 14px 18px; border-bottom: 1px solid var(--rg-line-soft); font-size: 15px; }
.rg-table td:last-child { font-family: var(--rg-font-mono); font-size: var(--rg-caption); color: var(--rg-flavor, var(--rg-moss)); text-align: right; }
.rg-table tr:last-child td { border-bottom: 0; }
@media (max-width: 480px) { .rg-table td, .rg-table th { padding: 12px 14px; } }

/* --- Вкус как контекст: вешается на карточку/страницу товара --- */
[data-flavor='raspberry']    { --rg-flavor: var(--rg-raspberry); }
[data-flavor='blueberry']    { --rg-flavor: var(--rg-blueberry); }
[data-flavor='seabuckthorn'] { --rg-flavor: var(--rg-seabuckthorn); }
[data-flavor='cranberry']    { --rg-flavor: var(--rg-cranberry); }
[data-flavor='ginger']       { --rg-flavor: var(--rg-ginger); }
[data-flavor='coffee']       { --rg-flavor: var(--rg-coffee); }
[data-flavor='taiga-coffee'] { --rg-flavor: var(--rg-taiga-coffee); }
[data-flavor='energy']       { --rg-flavor: var(--rg-energy); }
[data-flavor='immune']       { --rg-flavor: var(--rg-immune); }