@import 'tokens-base.css?v=20260910pal6';

/**
 * 🎨 ПАЛІТРА ВІТРИНИ (те, що бачить покупець). Оновлено 10.09.2026.
 *
 * Основа від дизайнера: помаранчевий #c85f3d, темний #3b2924, допоміжний пісочний #d8ad7c,
 * фон #f6eddf (теплий замість холодного білого).
 *
 * ⚠️ ОДИН ПОМАРАНЧЕВИЙ НА ОКО. Норма доступності — контраст 4.5 для звичайного тексту,
 * а чистий #c85f3d дає лише 4.07 під білим текстом. Тому робочий відтінок кнопок — #bf5836:
 * він темніший рівно настільки, щоб пройти норму (4.50), і відрізняється від #c85f3d на 2.9
 * за шкалою різниці кольорів, тобто око різниці не бачить.
 * Темніший «текстовий» варіант (#ae5031) ПРИБРАНО за рішенням власника 10.09.2026 — на око
 * він читався як цегляно-червоний, інший колір. Помаранчевий текст тепер той самий #bf5836;
 * там, де він дрібний, у наступних етапах збільшуємо кегль або жирність (для великого тексту
 * норма 3.0, і цей відтінок її тримає з запасом).
 * Ховер темніший зі зсувом у бік жовтого (#b05932) — інакше затемнення теж червонить.
 *
 * ⚠️ Білий текст на пісочному #d8ad7c дає 2.06 — на ньому пишемо лише темним.
 *
 * Цей файл підключає лише вітрина (через client/ui/css/main.css). Кабінети мають свої:
 * palette-vendor.css, palette-manager.css, palette-admin.css.
 */
:root {
  /* ── Темний: текст і глибокі поверхні ── */
  /* 10.09.2026: #3b2924 на великих площах читався червонуватим — власник просив глибше
     й ближче до старого. Підбирали у два заходи: #2e231c усе одно віддавав червоним, бо його
     відтінок 23°, а #282115 (відтінок 38°) на великій площі підвалу пішов у зелень: там
     зелений канал 33 майже дорівнював червоному 40, і око читає це як оливу.
     Робочий #2c2016 — канали 44/32/22: червоного помітно більше за зелений, синього мало.
     Це кава, а не олива й не цегла. #3b2924 лишається як «мʼякший» варіант у
     --color-brown-soft для дрібних плашок. */
  --color-primary:      #2c2016;   /* великі темні площі: шапка, підвал, банери (білий 15.8 ✅) */
  --color-secondary:    #42301f;   /* світліший компаньйон для градієнтів */
  --color-brown-soft:   #3b2924;   /* мʼякий темний дизайнера — дрібні плашки, обведення */

  /* ── Помаранчевий бренду ── */
  /* 10.09.2026, підбирали в три заходи — записую висновки, щоб не ходити по колу:
     • #bf5836 «різав очі» на великих кнопках;
     • зрізана насиченість (#b45c42) зробила колір мутним і червонуватим — причина в СИНЬОМУ
       каналі: 66 при червоному 180 дає брудний відтінок, а не спокійний;
     • робоче рішення — не різати насиченість, а зсунути відтінок з 15° на 20° і опустити
       синій до 50. Виходить чистий помаранчевий, спокійніший за вихідний і без червоні. */
  --color-accent:       #b35d32;   /* робочий: кнопки, білий текст 4.64 ✅ */
  --color-accent-hover: #9a4d26;   /* наведення: темніше, той самий помаранчевий */
  --color-accent-ink:   #b35d32;   /* помаранчевий текст — той самий відтінок */
  --color-accent-pure:  #c85f3d;   /* чистий колір дизайнера: площі, іконки, великий текст */

  /* ── Пісочний: допоміжний ── */
  --color-sand:         #d8ad7c;   /* плашки, рамки, іконки на темному */
  --color-sand-soft:    #eddcc4;   /* світла підкладка під пісочний акцент */

  /* ── Полотно й поверхні ── */
  --color-bg:           #f6eddf;   /* фон сторінки */
  --color-bg-alt:       #efe3d0;   /* друга поверхня: смуги, зони, підкладки */
  --color-surface:      #fffaf3;   /* картки: тепла біла, а не крижана */
  --color-white:        #FFFFFF;   /* там, де потрібен саме чистий білий */
  /* Текст ПОВЕРХ акцентної плашки. Окремий токен, бо в темній темі акцент
     світлішає і напис на ньому мусить стати темним — білий дав би 3,0:1. */
  --color-on-accent:    #FFFFFF;

  /* ── Текст і межі ── */
  --color-text:         #3b2924;
  --color-text-muted:   #6b5d4f;   /* на фоні 5.48 ✅ (старий #7C6C5C давав 4.35 ❌) */
  --color-border:       #e6dbc9;

  /* ── Додаткові ролі (щоб вшиті кольори в розмітці стали токенами) ── */
  --color-accent-deep:  #8a3f26;   /* глибокий кінець помаранчевих градієнтів */
  --color-text-soft:    #7d6f61;   /* світліший приглушений (підписи на картках) */
  --color-brown-mid:    #5c4f43;   /* середній коричневий: розділювачі на темному */
  --color-ink-deep:     #2a1c17;   /* найтемніший: підкладки, оверлеї, шапки */

  /* ── Ті самі кольори трійками, щоб задавати прозорість:
       rgb(var(--color-accent-rgb) / .3) замість вшитого rgba(200,113,47,.3) ── */
  --color-accent-rgb:      200 95 61;    /* #c85f3d */
  --color-accent-work-rgb: 179 93 50;    /* #b35d32 */
  --color-primary-rgb:      44 32 22;    /* #2c2016 */
  --color-ink-deep-rgb:     42 28 23;    /* #2a1c17 */

  /* ── Тіні у тон темному кольору бренду ── */
  --shadow-sm: 0 2px 8px rgba(59,41,36,0.08);
  --shadow-md: 0 4px 20px rgba(59,41,36,0.12);
  --shadow-lg: 0 8px 40px rgba(59,41,36,0.16);
}

/* 🖱 Смуга прокрутки в кольорах бренду — тонка, тепла, не сіра системна.
   Firefox розуміє scrollbar-*, решта — ::-webkit-scrollbar. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-sand) transparent;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-sand);
  border-radius: 99px;
  border: 3px solid var(--color-bg);   /* повітря навколо повзунка */
}
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }