/* ==========================================================================
   1win Design System · СЛОЙ 2 — СЕМАНТИКА
   --------------------------------------------------------------------------
   Отвечает на вопрос «чем красить», а не «каким цветом».
   Именно этим слоем нужно пользоваться в разметке.

   Четыре группы (как в оригинальной системе 1win):
     --color-content-*     текст и иконки
     --color-background-*  заливки поверхностей
     --color-border-*      обводки и разделители
     --color-ui-*          заливки управляющих элементов
     --color-solid-*       «плотные» акценты (кнопки, индикаторы)

   Темы переключаются классом на любом предке:
     .colorScheme-dark   — тёмная (страница лендинга)
     .colorScheme-light  — светлая (белые блоки-секции внутри лендинга)

   Это ключ ко всей работе: белая карточка на тёмной странице — не набор
   хардкод-цветов, а <div class="colorScheme-light">. Внутри неё
   --color-content-base-primary автоматически становится тёмным.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Инвариантные семантические токены (не зависят от темы)
   -------------------------------------------------------------------------- */
:root {
  /* --- Бренд --------------------------------------------------------- */
  --color-solid-brand-primary-default: var(--brand-primary-light-9);  /* #0075ff */
  --color-solid-brand-primary-hover:   var(--brand-primary-light-10); /* #006eec */
  --color-solid-brand-primary-active:  var(--brand-primary-light-11); /* #0653b5 */
  --color-solid-brand-primary-alfa-12: var(--brand-primary-alfa-12);
  --color-solid-brand-primary-alfa-16: var(--brand-primary-alfa-16);
  --color-solid-brand-primary-alfa-68: var(--brand-primary-alfa-68);

  --color-solid-brand-accent-default: var(--brand-accent-light-9);
  --color-solid-brand-accent-hover:   var(--brand-accent-light-10);
  --color-solid-brand-accent-active:  var(--brand-accent-light-11);

  /* --- Статусы -------------------------------------------------------- */
  --color-solid-sentiment-positive-default:    var(--sentiment-positive-light-9);
  --color-solid-sentiment-negative-default:    var(--sentiment-negative-light-9);
  --color-solid-sentiment-warning-default:     var(--sentiment-warning-light-9);
  --color-solid-sentiment-informative-default: var(--sentiment-informative-light-9);
  --color-solid-sentiment-favorite-default:    var(--sentiment-favorite-light-9);

  /* --- Контент на цветной плашке ------------------------------------- */
  --color-content-base-on-primary: var(--neutral-clean-white);
  --color-content-base-on-accent:  var(--neutral-clean-white);

  /* --- Абсолютные (не переворачиваются вместе с темой) ---------------- */
  --color-content-base-static-white: var(--neutral-clean-white);
  --color-content-base-static-black: var(--neutral-clean-black);
  --color-background-base-static-white: var(--neutral-clean-white);
  --color-background-base-static-black: var(--neutral-clean-black);
  --color-background-base-none: var(--neutral-clean-white-none);

  --color-content-base-alfa-static-white-24: var(--neutral-dark-alfa-5);
  --color-content-base-alfa-static-white-32: var(--neutral-dark-alfa-6);
  --color-content-base-alfa-static-white-48: var(--neutral-dark-alfa-7);
  --color-content-base-alfa-static-white-64: var(--neutral-dark-alfa-10);
  --color-content-base-alfa-static-white-72: var(--neutral-dark-alfa-11);
  --color-content-base-alfa-static-white-88: var(--neutral-dark-alfa-13);

  --color-background-base-alfa-static-white-8:  var(--neutral-dark-alfa-1);
  --color-background-base-alfa-static-white-20: var(--neutral-dark-alfa-4);
  --color-background-base-alfa-static-white-32: var(--neutral-dark-alfa-6);
  --color-background-base-alfa-static-white-64: var(--neutral-dark-alfa-10);

  --color-background-base-alfa-static-black-20: var(--neutral-light-alfa-4);
  --color-background-base-alfa-static-black-48: var(--neutral-light-alfa-8);
  --color-background-base-alfa-static-black-60: var(--neutral-light-alfa-10);

  --color-border-base-alfa-static-white-8:  var(--neutral-dark-alfa-1);
  --color-border-base-alfa-static-white-20: var(--neutral-dark-alfa-4);
  --color-border-base-alfa-static-white-64: var(--neutral-dark-alfa-10);

  /* --- Фокус ---------------------------------------------------------- */
  --focus-ring-color: var(--color-solid-brand-primary-alfa-68);
  --focus-ring-width: 2px;
  --focus-ring-offset: 4px;
}

/* --------------------------------------------------------------------------
   Контейнер со схемой сам задаёт цвет текста — всё внутри наследует его.
   Без этой строки переключение темы меняло бы переменные, но не картинку.
   -------------------------------------------------------------------------- */
.colorScheme-dark,
.colorScheme-light,
.colorScheme-onColor { color: var(--color-content-base-primary); }

/* --------------------------------------------------------------------------
   ТЁМНАЯ ТЕМА — основная для 1win Token
   -------------------------------------------------------------------------- */
.colorScheme-dark {
  color-scheme: dark;

  /* Поверхности */
  --color-background-base-primary:   var(--neutral-dark-1);   /* #141415 */
  --color-background-base-secondary: var(--neutral-dark-2);   /* #1d1e20 */
  --color-background-base-tertiary:  var(--neutral-dark-3);   /* #2e3035 */
  --color-background-base-elevated:  var(--neutral-clean-black);
  --color-background-base-inverted:  var(--neutral-clean-white);

  --color-background-base-alfa-neutral-8:  var(--neutral-dark-alfa-tonal-1);
  --color-background-base-alfa-neutral-12: var(--neutral-dark-alfa-tonal-2);
  --color-background-base-alfa-neutral-16: var(--neutral-dark-alfa-tonal-3);
  --color-background-base-alfa-neutral-20: var(--neutral-dark-alfa-tonal-4);
  --color-background-base-alfa-neutral-32: var(--neutral-dark-alfa-tonal-6);

  /* Текст */
  --color-content-base-primary:   var(--neutral-dark-14);  /* #f0f2f5 */
  --color-content-base-secondary: var(--neutral-dark-13);  /* #9aa1b1 */
  --color-content-base-tertiary:  var(--neutral-dark-12);  /* #797f8b */
  --color-content-base-inverted:  var(--neutral-clean-black);

  --color-content-base-alfa-neutral-64: var(--neutral-dark-alfa-tonal-10);

  /* Обводки */
  --color-border-base-alfa-container: var(--neutral-dark-alfa-tonal-3);
  --color-border-base-alfa-divider:   var(--neutral-dark-alfa-tonal-2);
  --color-border-base-default:        var(--neutral-dark-5);
  --color-border-base-subtle:         var(--neutral-dark-4);

  /* Управляющие элементы */
  --color-ui-base-default: var(--neutral-dark-4);
  --color-ui-base-hover:   var(--neutral-dark-5);
  --color-ui-base-active:  var(--neutral-dark-6);

  --color-ui-brand-primary-default: var(--brand-primary-dark-4);
  --color-ui-brand-primary-hover:   var(--brand-primary-dark-5);
  --color-ui-brand-primary-active:  var(--brand-primary-dark-6);

  /* Синий на тёмном ведёт себя чуть иначе, чем на белом */
  --color-solid-brand-primary-default: var(--brand-primary-dark-9);  /* #0075ff */
  --color-solid-brand-primary-hover:   var(--brand-primary-dark-10); /* #1381ff */
  --color-solid-brand-primary-active:  #1473df;                      /* с лендинга */

  --color-content-brand-primary:   var(--brand-primary-dark-14);
  --color-content-brand-secondary: var(--brand-primary-dark-13);
  --color-content-brand-tertiary:  var(--brand-primary-dark-12);
}

/* --------------------------------------------------------------------------
   СВЕТЛАЯ ТЕМА — белые блоки-секции внутри тёмного лендинга
   -------------------------------------------------------------------------- */
.colorScheme-light {
  color-scheme: light;

  --color-background-base-primary:   var(--neutral-light-1);  /* #ffffff */
  --color-background-base-secondary: var(--neutral-light-2);  /* #e7e9ed */
  --color-background-base-tertiary:  var(--neutral-light-3);  /* #d7dbe2 */
  --color-background-base-elevated:  var(--neutral-clean-white);
  --color-background-base-inverted:  var(--neutral-clean-black);

  --color-background-base-alfa-neutral-8:  var(--neutral-light-alfa-tonal-1);
  --color-background-base-alfa-neutral-12: var(--neutral-light-alfa-tonal-2);
  --color-background-base-alfa-neutral-16: var(--neutral-light-alfa-tonal-3);
  --color-background-base-alfa-neutral-20: var(--neutral-light-alfa-tonal-4);
  --color-background-base-alfa-neutral-32: var(--neutral-light-alfa-tonal-6);

  --color-content-base-primary:   var(--neutral-light-14); /* #141415 */
  --color-content-base-secondary: var(--neutral-light-13); /* #53575f */
  --color-content-base-tertiary:  var(--neutral-light-12); /* #6f7480 */
  --color-content-base-inverted:  var(--neutral-clean-white);

  --color-content-base-alfa-neutral-64: var(--neutral-light-alfa-tonal-10);

  --color-border-base-alfa-container: var(--neutral-light-alfa-tonal-3);
  --color-border-base-alfa-divider:   var(--neutral-light-alfa-tonal-2);
  --color-border-base-default:        var(--neutral-light-8);
  --color-border-base-subtle:         var(--neutral-light-7);

  --color-ui-base-default: var(--neutral-light-4);
  --color-ui-base-hover:   var(--neutral-light-5);
  --color-ui-base-active:  var(--neutral-light-6);

  --color-ui-brand-primary-default: var(--brand-primary-light-4);
  --color-ui-brand-primary-hover:   var(--brand-primary-light-5);
  --color-ui-brand-primary-active:  var(--brand-primary-light-6);

  --color-solid-brand-primary-default: var(--brand-primary-light-9);
  --color-solid-brand-primary-hover:   var(--brand-primary-light-10);
  --color-solid-brand-primary-active:  var(--brand-primary-light-11);

  --color-content-brand-primary:   var(--brand-primary-light-14);
  --color-content-brand-secondary: var(--brand-primary-light-13);
  --color-content-brand-tertiary:  var(--brand-primary-light-12);
}

/* --------------------------------------------------------------------------
   ТЕМА «НА ЦВЕТНОЙ ЗАЛИВКЕ»
   Для секций с синей/градиентной подложкой (#3259fe, #268aff, градиент).
   Текст всегда белый, вторичный — белый 68%.
   -------------------------------------------------------------------------- */
.colorScheme-onColor {
  color-scheme: dark;

  --color-content-base-primary:   var(--neutral-clean-white);
  --color-content-base-secondary: var(--neutral-dark-alfa-11); /* 72% */
  --color-content-base-tertiary:  var(--neutral-dark-alfa-10); /* 64% */

  --color-background-base-alfa-neutral-12: var(--neutral-dark-alfa-2);
  --color-background-base-alfa-neutral-16: var(--neutral-dark-alfa-3);
  --color-background-base-alfa-neutral-20: var(--neutral-dark-alfa-4);

  --color-border-base-alfa-container: var(--neutral-dark-alfa-3);
  --color-border-base-alfa-divider:   var(--neutral-dark-alfa-2);
}