/*
 * HotelBox Tickets - брандови токени
 * ==================================
 *
 * Един източник на истината за цветовете. Числата в скоби са контрастът спрямо
 * бяло по WCAG - затова има отделни токени за „повърхност" и за „текст":
 * кехлибареното е чудесно като бутон и негодно като дребен текст.
 *
 * Къде се ползва: лендинг страницата, Filament панелите на connect, витрината в
 * WordPress плъгина, имейл шаблоните. Промяна тук се пренася навсякъде.
 */

:root {
  /* ---- Къщата. Цветовете са взети от самия файл на логото. ---- */
  --hb-green:        #4FBE6E;  /* марката; „валиден" върху тъмно (4.9 на мастилено) */
  --hb-green-light:  #69D47D;  /* светлата стена на кутията; текст върху тъмно (7.6) */
  --hb-green-ink:    #1B7D43;  /* зелен ТЕКСТ върху бяло (5.2) */
  --hb-grey:         #5A5A5A;  /* сивото на кутията; второстепенен текст (6.9) */

  /* ---- Продуктът. Кехлибареното принадлежи на Tickets. ---- */
  --hbt-amber:       #FFAB4D;  /* бутони, чипа, подчертавания; тъмен текст отгоре (6.2) */
  --hbt-amber-ink:   #A85E08;  /* кехлибарен ТЕКСТ върху бяло (4.9) */
  --hbt-amber-deep:  #E0913A;  /* ръбове и сянка под бутон */

  /* ---- Неутрални ---- */
  --hb-ink:          #393939;  /* основен текст (11.6) */
  --hb-ink-deep:     #2B2B2B;  /* тъмни блокове, подвал */
  --hb-muted:        #6E6A66;  /* приглушен текст (5.4) */
  --hb-paper:        #FFFFFF;
  --hb-surface:      #F8F8F8;
  --hb-rule:         #E6E4E1;

  /* ---- Шрифтове ----
   * Poppins от сайта НЯМА кирилица. Onest е геометричен като нея, но с кирилица
   * по рождение - и за разлика от Montserrat, Manrope, Commissioner и Raleway
   * не подменя буквите с българските ръкописни форми при lang="bg".
   */
  --hb-display: "Onest", "Poppins", system-ui, sans-serif;
  --hb-body:    "Open Sans", system-ui, sans-serif;
  --hb-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* ---- Форма ---- */
  --hb-radius:    6px;
  --hb-radius-lg: 12px;
}

/*
 * Продуктовият чип.
 *
 * Формата е еднаква за всички модули - различава ги само цветът. Кутията е
 * фирмата, чипът е продуктът. Ползва се до логото и самостоятелно в панела.
 */
.hb-chip {
  display: inline-block;
  font: 800 13px/1 var(--hb-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 8px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
}
.hb-chip--tickets { color: var(--hbt-amber-ink); }
.hb-chip--connect { color: var(--hb-green-ink); }

/* Върху тъмен фон чипът светва - тъмните варианти нямат достатъчен контраст. */
.hb-on-dark .hb-chip--tickets { color: var(--hbt-amber); }
.hb-on-dark .hb-chip--connect { color: var(--hb-green-light); }