/* ============================================================
   ПАЛИТРА «ПЕСОК» — VVELL-59
   Тёплый песок + глубокий зелёный + лёгкий объём.
   Референс владельца: кроссовки adidas Adizero.

   ПОДХОД (тот же, что у premium.css, он себя оправдал): грузится ПОСЛЕДНЕЙ и
   переопределяет :root-токены. Вёрстка экранов не трогается — перекрашивается
   всё приложение разом, потому что экраны читают токены (2747 обращений var()).
   Откат = снять один <link> в base.html.

   КОНТРАСТ. Токены подобраны под WCAG AA (текст ≥4.5:1 и на фоне, и на карточке).
   В первой тестовой версии палитры этого не было: третичный текст давал 2.50,
   акцентный зелёный 2.90, терракот 2.93 — то есть подписи и даты по всему
   приложению были нечитаемыми. Тона сохранены, светлота исправлена.
   --ink-4 намеренно 3.1–3.5: это не текст, а выключенные состояния и декор.

   Проверено расчётом на парах фон/карточка, день и ночь. 2026-07-29
   ============================================================ */

:root {
  /* ── Сырые тона палитры ─────────────────────────────────── */
  --sand-bg:        #F1EADD;  /* страница */
  --sand-bg-top:    #F6F1E7;  /* верх градиента страницы */
  --sand-bg-bottom: #E7EDE4;  /* низ — уход в холодную зелень */
  --sand-surface:   #FBF7EF;  /* приподнятая поверхность (карточка) */
  --sand-surface-2: #F5EFE3;  /* вложенная поверхность */
  --sand-line:      #E0D6C3;
  --sand-line-soft: #EBE3D5;

  --sand-ink:       #23302A;  /* тёплый графит, 12.9 на карточке */
  --sand-ink-2:     #5E6B62;  /* 5.23 */
  --sand-ink-3:     #606A61;  /* 5.27 */
  --sand-ink-4:     #7C877D;  /* 3.50 — только не-текст */

  --sand-green:      #177652; /* акцент/ссылки, 5.24 на карточке */
  --sand-green-deep: #12694A; /* заголовки, низ градиента кнопки */
  --sand-green-fill: #1A855C; /* заливка под белым текстом, 4.61 */
  --vv-green-fill: var(--sand-green-fill);   /* легаси-алиас для .msg.user */
  --sand-green-tint: #E4EFE5;
  --sand-clay:       #9C562C; /* терракот вместо оранжевого, 5.20 */
  --sand-clay-tint:  #F6E9DD;
  --sand-berry:      #B0463B;
  /* Заливка кнопок опасного действия: белый текст обязан давать >= 4,5:1.
     Значение ОДНО на обе темы — см. .vv-confirm-danger в premium.css. */
  --vv-berry-solid:  #B0463B;

  /* ── Легаси-слой токенов (app.css / design_v2.css) ───────── */
  --vv-green:        var(--sand-green);
  --vv-green-dark:   var(--sand-green-deep);
  --vv-green-soft:   #4FBF8C;
  --vv-green-tint:   var(--sand-green-tint);
  --vv-green-tint-2: #EDF4EC;
  --vv-clay:         var(--sand-clay);
  --vv-clay-tint:    var(--sand-clay-tint);
  --vv-berry:        var(--sand-berry);
  /* Жёлтый и лайм — ЗАЛИВКИ, а не текст: в app.css они стоят фоном под
     color: var(--ink) (8 мест у жёлтого, календарь у лайма). Первая версия
     палитры затемнила жёлтый до #B8862B «чтобы читался как текст» — и уронила
     эти плашки с 9.67 до 4.24. Держим их светлыми, а для единственного
     текстового употребления (.vv-icon-yellow) есть отдельный тёмный токен. */
  --vv-yellow:       #F2C94C;   /* заливка: тёмный текст на ней 8.66 */
  --vv-yellow-ink:   #8A6200;   /* тот же жёлтый, когда он ТЕКСТ */
  --vv-lime:         #BFE3A8;   /* заливка: тёмный текст на ней 9.67 */
  --vv-orange:       var(--sand-clay);
  --vv-blue:         #3C6E8F;
  --vv-blue-tint:    #E6EEF3;

  /* Объявляем недостающие уровни: в app.css 13 мест живут на фолбэках
     var(--ink-5, #eee) — это холодный серый, мимо палитры. */
  --ink-5: #E7DFD0;
  --ink-6: #F2EBDD;

  --ink:       var(--sand-ink);
  --ink-2:     var(--sand-ink-2);
  --ink-3:     var(--sand-ink-3);
  --ink-4:     var(--sand-ink-4);
  --line:      var(--sand-line);
  --line-soft: var(--sand-line-soft);
  --paper:     var(--sand-surface);
  --bg:        var(--sand-bg);
  --bg-warm:   var(--sand-surface-2);
  --card:      var(--sand-surface);

  /* ── Слой dv2 (на нём построены главная и premium-экраны) ── */
  --dv2-bg:         var(--sand-bg);
  --dv2-surface:    var(--sand-surface);
  --dv2-surface-2:  var(--sand-surface-2);
  --dv2-text:       var(--sand-ink);
  --dv2-text-2:     var(--sand-ink-2);
  --dv2-muted:      var(--sand-ink-3);
  --dv2-muted-2:    var(--sand-ink-4);
  --dv2-border:     var(--sand-line);
  --dv2-border-soft:var(--sand-line-soft);
  --dv2-green:      var(--sand-green);
  --dv2-green-dark: var(--sand-green-deep);
  --dv2-green-tint: var(--sand-green-tint);
  --dv2-berry:      var(--sand-berry);
  --dv2-yellow:     #B8862B;
  --dv2-chip-bg:    rgba(35,48,42,.05);
  --dv2-glass:      rgba(241,234,221,.88);
  --dv2-glass-nav:  rgba(241,234,221,.86);
  --dv2-icon-color: var(--sand-ink-2);
  --dv2-ai-bubble:  var(--sand-green-tint);
  --dv2-ai-border:  #CFE0CE;
  --dv2-btn-surface:rgba(251,247,239,.92);

  /* ── Объём: тени тёплые (нейтрально-серая тень на песке грязнит) ── */
  --sh-1: 0 1px 2px rgba(52,42,26,.05), 0 1px 1px rgba(52,42,26,.04);
  --sh-2: 0 2px 6px rgba(52,42,26,.06), 0 10px 24px rgba(52,42,26,.06);
  --sh-3: 0 4px 10px rgba(52,42,26,.07), 0 20px 50px rgba(52,42,26,.10);
  --dv2-shadow: var(--sh-1);

  /* грань сверху — за счёт неё карточка «приподнята», а не просто с тенью */
  --sand-edge: inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── Ночь ────────────────────────────────────────────────────
   Не инверсия: тёплый песок уходит в глубокую зелень, текст остаётся
   песочным. Контраст пересчитан отдельно, светлые значения не годятся. */
.vv-theme-night {
  --sand-bg:        #131C18;
  --sand-bg-top:    #131C18;
  --sand-bg-bottom: #172420;
  --sand-surface:   #1C2721;
  --sand-surface-2: #232F28;
  --sand-line:      #2C3A32;
  --sand-line-soft: #24302A;

  --sand-ink:   #EDE5D6;  /* 12.3 на карточке */
  --sand-ink-2: #B3BEB4;  /* 8.04 */
  --sand-ink-3: #818E84;  /* 4.51 */
  --sand-ink-4: #6E7A70;  /* 3.44 — не-текст */

  --sand-green:      #3FC08B;  /* 6.70 */
  --sand-green-deep: #249D6F;  /* 4.50 — светлее дневного, иначе тонет */
  /* ⚠ БЫЛО #1F8A61 — белый на нём даёт 4,32:1, ниже порога 4,5. Заливка
     существует ровно для белого текста (кнопка «Далее» в онбординге,
     пузырь .msg.user), поэтому чуть темнее: #1D855D = 4,60:1 с белым и
     3,82:1 к ночному фону страницы, то есть фигура кнопки по-прежнему видна. */
  --sand-green-fill: #1D855D;
  --vv-green-fill: var(--sand-green-fill);
  --sand-green-tint: rgba(63,192,139,.14);
  --sand-clay:       #E09055;  /* 6.09 */
  --sand-clay-tint:  rgba(224,144,85,.14);
  --sand-berry:      #E5766A;
  --vv-berry-solid:  #B0463B;   /* ночью лососевый #E5766A даёт 2,94:1 — нельзя */

  --vv-yellow:  #E3B85C;
  --vv-yellow-ink: #E3B85C;   /* ночью жёлтый читаем как текст без затемнения */
  --dv2-yellow: #E3B85C;
  --vv-lime:    #7FB98A;
  --vv-blue:    #7FB4D4;
  --vv-blue-tint: rgba(127,180,212,.14);
  --vv-green-soft: #5FD3A2;
  --vv-green-tint-2: rgba(63,192,139,.10);
  --ink-5: #2C3A32;
  --ink-6: #24302A;

  --dv2-chip-bg:    rgba(237,229,214,.08);
  --dv2-glass:      rgba(19,28,24,.92);
  --dv2-glass-nav:  rgba(19,28,24,.92);
  --dv2-ai-border:  rgba(63,192,139,.28);
  --dv2-btn-surface:rgba(28,39,33,.92);

  --sh-1: 0 1px 4px rgba(0,0,0,.28);
  --sh-2: 0 6px 20px rgba(0,0,0,.34);
  --sh-3: 0 14px 40px rgba(0,0,0,.40);
  --sand-edge: inset 0 1px 0 rgba(255,255,255,.05);

  /* Маппинг ОБЯЗАТЕЛЬНО дублируем здесь, а не полагаемся на наследование из :root.
     premium.css объявляет --paper/--bg/--card и весь dv2-набор прямо на
     .vv-theme-night, а значение, заданное на самом элементе, бьёт унаследованное
     из :root независимо от порядка файлов. Без этих строк часть ночных карточек
     оставалась серо-синей от прежней темы (проверено на скрине). */
  --ink:       var(--sand-ink);
  --ink-2:     var(--sand-ink-2);
  --ink-3:     var(--sand-ink-3);
  --ink-4:     var(--sand-ink-4);
  --line:      var(--sand-line);
  --line-soft: var(--sand-line-soft);
  --paper:     var(--sand-surface);
  --bg:        var(--sand-bg);
  --bg-warm:   var(--sand-surface-2);
  --card:      var(--sand-surface);
  --vv-green:      var(--sand-green);
  --vv-green-dark: var(--sand-green-deep);
  --vv-green-tint: var(--sand-green-tint);
  --vv-clay:       var(--sand-clay);
  --vv-clay-tint:  var(--sand-clay-tint);
  --vv-berry:      var(--sand-berry);
  --vv-orange:     var(--sand-clay);

  --dv2-bg:         var(--sand-bg);
  --dv2-surface:    var(--sand-surface);
  --dv2-surface-2:  var(--sand-surface-2);
  --dv2-text:       var(--sand-ink);
  --dv2-text-2:     var(--sand-ink-2);
  --dv2-muted:      var(--sand-ink-3);
  --dv2-muted-2:    var(--sand-ink-4);
  --dv2-border:     var(--sand-line);
  --dv2-border-soft:var(--sand-line-soft);
  --dv2-green:      var(--sand-green);
  --dv2-green-dark: var(--sand-green-deep);
  --dv2-green-tint: var(--sand-green-tint);
  --dv2-berry:      var(--sand-berry);
  --dv2-icon-color: var(--sand-ink-2);
  --dv2-ai-bubble:  var(--sand-green-tint);
  --dv2-shadow:     var(--sh-1);
}

/* Ночные правила прежней темы ставят плоский фон через !important
   (design_v2.css:3102 и :3661). Токен там уже наш, но градиент и грань они
   срезают — возвращаем объём с той же специфичностью. */
.vv-theme-night .wkb-card,
.vv-theme-night .wkb-pane,
.vv-theme-night .vv-theme-card,
.vv-theme-night .biomarker-card {
  background: linear-gradient(180deg, var(--sand-surface) 0%, var(--sand-surface-2) 100%) !important;
  border-color: var(--sand-line-soft) !important;
  box-shadow: var(--sand-edge), var(--sh-2);
}

/* ── Страница ───────────────────────────────────────────────── */
body {
  background: var(--sand-bg-bottom);
  color: var(--sand-ink);
}
.screen, .wh-home, .wh-detail {
  background: linear-gradient(180deg,
    var(--sand-bg-top) 0%, var(--sand-bg) 45%, var(--sand-bg-bottom) 100%);
  color: var(--sand-ink);
}

/* ── Объём карточек ──────────────────────────────────────────
   Тот же набор селекторов, который premium.css уже полирует, плюс блоки
   главной. Приподнятость = светлая грань сверху + мягкая тёплая тень,
   а не жирный бордер: на песке бордер читается как грязь. */
.dv2-cart-header, .vv-meal-block, .wkb-card, .vv-theme-card, .lh-card, .vv-why-cart,
.wh-mon, .wh-insight, .wh-stages, .wh-cart, .wh-stat, .wh-myday, .wh-age, .wh-trends {
  background: linear-gradient(180deg, var(--sand-surface) 0%, var(--sand-surface-2) 100%);
  border: 1px solid var(--sand-line-soft);
  box-shadow: var(--sand-edge), var(--sh-2);
  border-radius: 16px;
}

/* Нажатие: карточка «садится». Только тень и сдвиг — layout не двигаем. */
.wh-mon:active, .wh-cart:active, .lh-card:active, .vv-theme-card:active {
  transform: translateY(1px);
  box-shadow: var(--sand-edge), var(--sh-1);
}
@media (prefers-reduced-motion: reduce) {
  .wh-mon:active, .wh-cart:active, .lh-card:active, .vv-theme-card:active { transform: none; }
}

/* ── Кнопки: зелёный градиент с объёмом ─────────────────────── */
.wh-cta, .wh-cart-cta, .vv-ai-btn-primary, .dv2-btn-primary {
  background: linear-gradient(180deg, var(--sand-green-fill) 0%, var(--sand-green-deep) 100%);
  box-shadow: 0 2px 8px rgba(18,105,74,.26), inset 0 1px 0 rgba(255,255,255,.22);
  border: none;
  color: #fff;
}

/* ── Кольца/графики главной ─────────────────────────────────── */
.wh-ring-bg { stroke: rgba(35,48,42,.09); }
.vv-theme-night .wh-ring-bg { stroke: rgba(237,229,214,.12); }
.wh-ring-fg { filter: drop-shadow(0 2px 4px rgba(18,105,74,.26)); }
.wh-head-title { color: var(--sand-green-deep); }
.wh-head-date  { color: var(--sand-ink-3); }

/* ── Бейджи ─────────────────────────────────────────────────── */
.wh-mon-badge.ok   { background: rgba(23,118,82,.14);  color: var(--sand-green); }
.wh-mon-badge.warn { background: rgba(156,86,44,.14);  color: var(--sand-clay); }

/* ── Поверхности, у которых белый был захардкожен ─────────────
   На бежевом фоне чистый белый читается как заплатка. Правим здесь, а не в
   app.css: слой палитры снимается одной строкой в base.html, и приложение
   возвращается к прежнему виду без разбора правок по файлам.

   Белый СОХРАНЁН намеренно там, где он несёт смысл: подложка под фото товара
   (снимки сняты на белом фоне) и тёплые янтарные плашки аллергенов и
   предупреждений — они семантические и на песке звучат согласованно. */
.vv-modal-card,
.vv-ai-btn-ghost,
.vv-cart-hero-btn,
.wkb-quick-input input,
.wkb-found-mini-check {
  background: var(--sand-surface);
}
.vv-modal-card {
  border: 1px solid var(--sand-line-soft);
  box-shadow: var(--sand-edge), var(--sh-3);
}
.wkb-quick-input input { color: var(--sand-ink); border-color: var(--sand-line); }
.wkb-quick-input input::placeholder { color: var(--sand-ink-4); }

/* Поля ввода и выпадающие списки по всему приложению — та же поверхность */
input[type="text"], input[type="search"], input[type="number"],
input[type="tel"], input[type="email"], textarea, select {
  background: var(--sand-surface);
  color: var(--sand-ink);
  border-color: var(--sand-line);
}
input::placeholder, textarea::placeholder { color: var(--sand-ink-4); }

/* Подписи главного экрана. design_v2.css:3744 маппит --wh-ink-3 на --dv2-muted-2,
   а это не-текстовый уровень (3.50 на карточке). 23 подписи главной сидели ниже
   нормы. Тот же селектор, но наш файл грузится позже — перебивает. */
.wh-home, .wh-detail { --wh-ink-3: var(--dv2-muted); }

/* Жёлтый в его единственном текстовом употреблении */
.vv-icon-yellow { color: var(--vv-yellow-ink); }

/* Календарь дневника: заливка лаймом под текстом --ink-2 просела до 3.82,
   потому что палитра осветлила --ink-2. Ставим основной уровень текста. */
.wkb-cal-cell.wkb-cal-partial { color: var(--ink); }

/* Чип отметки привычки (мой же блок из VVELL-60): фолбэк был бледной мятой,
   а реальное значение --vv-green-soft — насыщенный зелёный, и чип выходил
   кислотным. Нужен тинт, а не заливка. */
.vv-habit-chip {
  background: var(--sand-green-tint);
  border-color: var(--sand-line);
}
.vv-habit-chip.undone { background: var(--sand-surface-2); border-color: var(--sand-line-soft); }
.vv-habit-mark { background: var(--sand-green-fill); }
.vv-habit-chip.undone .vv-habit-mark { background: var(--sand-ink-4); }
.vv-habit-undo { border-color: var(--sand-line); color: var(--sand-ink-2); }

/* Фокус виден в обеих темах — обязательный пункт доступности */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--sand-green);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   ЧАТ: ДВА ЦВЕТА, КОТОРЫЕ НЕ ПЕРЕЖИВАЛИ НОЧЬ (замер 12.08.2026)
   ═══════════════════════════════════════════════════════════════════ */

/* ⚠ 1. КНОПКА «ОТПРАВИТЬ» — БЕЛАЯ СТРЕЛКА НА СВЕТЛО-ЗЕЛЁНОМ ДИСКЕ = 2,30:1.
   design_v2.css задаёт ей `background: var(--vv-green); color: white`, и днём
   это честные 5,60:1 (зелёный тёмный, #177652), а ночью тот же токен светлеет
   до #3FC08B — белое на белом. Ниже даже 3:1, которые полагаются графике.
   Соседняя кнопка остановки после переделки в сплошной диск даёт 12,3:1:
   в одной строке заметнее стала ВСПОМОГАТЕЛЬНАЯ кнопка, а не основное действие.
   Диск ночью осветлять нельзя (он и должен быть виден на тёмном поле ввода),
   поэтому меняем ЗНАЧОК: тёмный на светлом диске.
   Замер: #131C18 на #3FC08B = 7,63:1, сам диск к полю ввода #1C2721 = 6,72:1.
   Значок наследует цвет через `stroke: currentColor`, поэтому хватает color. */
:root      { --vv-send-fg: #FFFFFF; }
.vv-theme-night { --vv-send-fg: var(--sand-bg); }
#screen-chat .chat-input .send { color: var(--vv-send-fg) !important; }

/* ⚠ 2. ПОДПИСЬ «VVILLIAM» И ДУГА СПИННЕРА НОЧЬЮ = 3,97:1.
   Цвет брался из --vv-green-dark (ночью #249D6F) на фоне пузыря: у обычного
   ответа это --line-soft #24302A, у пузыря ожидания — тинт rgba(63,192,139,.14)
   поверх #131C18. Текст 10px/800, послабление для крупного шрифта не действует.
   Ставим основной зелёный (#3FC08B): 5,90:1 на пузыре ответа и 5,91:1 на пузыре
   ожидания. Днём правило не трогаем — там 5,65:1 и всё в норме.
   Аватар-кружок «V» осознанно не трогаю: это отдельный вопрос про выворотку
   на диске, и он в этот замер не входил. */
.vv-theme-night #screen-chat .msg.ai .bot { color: var(--sand-green) !important; }
.vv-theme-night .vv-chat-spin { border-top-color: var(--sand-green); }

/* ═════════════════════════════════════════════════════════════════════════
   НИЖНЯЯ НАВИГАЦИЯ НЕ ДОЛЖНА ПРОСВЕЧИВАТЬ ТЕКСТОМ СПИСКА (13.08.2026)

   Найдено снимками: между подписями «Сегодня» и «Корзина» отчётливо читались
   строки списка «Знаний» — «Белковый завтрак…», «мышцам на восстановление», —
   и то же самое на /wellness/foundation («Фото | Начать трекать»).
   Причина не в отступах: у `.screen` уже стоит padding-bottom 130px, и при
   прокрутке содержимое проходит ПОД баром — так и задумано. Причина в самом
   баре: фон стоял rgba(241,234,221,.86) днём и rgba(19,28,24,.92) ночью, и
   этой прозрачности хватало, чтобы кириллица читалась насквозь через
   blur(24px). Подписи навигации при этом конкурировали с чужим текстом.

   Лечим прицельно НИЖНИЙ бар, а не токен `--dv2-glass-nav`: тот же токен
   красит верхнюю шапку, и там стекло уместно — под ней ничего не едет.
   Файл выбран последним в каскаде (app → design_v2 → premium → palette_sand),
   иначе `!important` из premium.css:87 и design_v2.css:807 перебьёт правку.
   ═════════════════════════════════════════════════════════════════════════ */
.bottom-nav.bottom-nav-v2,
#bottom-nav-v2,
/* Тот же бар на страницах /wellness/* — у него свой класс, и снимок
   /wellness/sphere/Sleep показал ровно ту же беду: сквозь бар читался
   заголовок тезиса рядом с подписью «Главная». */
.bottom-nav.wkb-bottom-nav {
  background: var(--bg) !important;
}

/* Кнопка «Отметить съеденное» в карточке заказа ночью (08.09.2026, замечание помощника натива): green-deep ночью
   светлеет до #249D6F, белый на нём 3,4:1 — ниже 4,5. Под белый текст в палитре заведён green-fill (#1D855D, 4,6). */
.vv-theme-night .vv-os-act.is-primary { background: var(--sand-green-fill) !important; }