/* ==========================================================================
   AnySkills UI · токены
   --------------------------------------------------------------------------
   Значения сняты с исходников Vuexy v10.11.1 (HTML v3.0.0):
   scss/_bootstrap-extended/_variables.scss, _variables-dark.scss,
   scss/_components/_variables.scss. Код свой, поверх Bootstrap 5.3.8.

   Отступления от Vuexy, все ради контраста 4.5:1 (WCAG AA):
   - цвет текста на светлой подложке («метки») темнее исходного:
     зелёный, голубой, оранжевый, красный и серый у Vuexy дают 1.8–3.5:1;
   - заливка кнопок успеха, сведений и опасности глубже, у предупреждения
     тёмный текст: белый на исходных цветах даёт 2.0–3.3:1;
   - вспомогательный серый текст темнее (#acaab1 даёт 2.3:1 на белом),
     исходный оставлен для подсказки внутри поля и выключенных элементов.
   Шрифт Inter: решение владельца 28.09 (у Public Sans нет кириллицы).
   ========================================================================== */

/* Inter (OFL), переменная толщина. Знак ₽ в наборе latin-ext: браузер
   докачает его, только если на странице есть рубли. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-cyrillic-ext.9e494903d6b0.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-cyrillic.4e2553027f1d.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.01ba6c2a184b.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.65850a373e25.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* ------------------------------------------------------------ светлая тема */
:root,
[data-bs-theme="light"] {
  /* Масштаб: у Vuexy корень 16px и текст 15px. Держим те же 16px на
     компьютере, на телефоне корень 15px, и множитель --ui-scale
     (настройка человека) работает, как раньше. */
  --ui-scale: 1;

  /* Шрифт интерфейса отдельной переменной: сменить его значит
     поменять одну строку (и --fw-medium под его толщину). */
  --font-ui: "Inter";
  --bs-font-sans-serif: var(--font-ui), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 0.9375rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.375;
  /* У Vuexy «средний» вес 500 в Public Sans. Manrope тоньше, та же
     плотность у него на 600: заголовки, кнопки, вкладки, метки. */
  --fw-medium: 500;

  /* Нейтральные: серые с фиолетовым оттенком, как у Vuexy */
  --base: #2f2b3d;
  --base-rgb: 47, 43, 61;
  --paper: #fff;
  --paper-rgb: 255, 255, 255;
  --gray-25: #fcfcfc;
  --gray-50: #f3f2f3;
  --gray-75: #eeeeef;
  --gray-100: #eaeaec;
  --gray-200: #e6e6e8;
  --gray-300: #c1bfc5;
  --gray-400: #acaab1;
  --gray-500: #97959e;
  --gray-600: #82808b;
  --gray-700: #6d6b77;
  --gray-800: #595564;
  --gray-900: #444050;

  --bs-body-color: #625f6c;          /* 6.2:1 на белом; темнее Vuexy, чтобы серый ниже прошёл 4.5 */
  --bs-body-color-rgb: 98, 95, 108;
  --bs-body-bg: #f8f7fa;
  --bs-body-bg-rgb: 248, 247, 250;
  --bs-emphasis-color: #2f2b3d;
  --bs-emphasis-color-rgb: 47, 43, 61;
  --bs-heading-color: #444050;       /* 9.39:1 */
  --bs-secondary-color: #6d6b77;     /* у Vuexy #acaab1, 2.3:1; 4.89 на фоне страницы */
  --bs-secondary-color-rgb: 109, 107, 119;
  --bs-tertiary-color: #acaab1;      /* только подсказка в поле и выключенное */
  --bs-tertiary-color-rgb: 172, 170, 177;
  --bs-secondary-bg: #e6e6e8;
  --bs-secondary-bg-rgb: 230, 230, 232;
  --bs-tertiary-bg: #f3f2f3;
  --bs-tertiary-bg-rgb: 243, 242, 243;

  --bs-border-width: 1px;
  --bs-border-color: #e6e6e8;
  --bs-border-color-translucent: rgba(47, 43, 61, 0.075);
  /* Рамка поля 3.4:1 к бумаге (WCAG 1.4.11); у Vuexy 22 %, 1.5:1 */
  --input-border-color: color-mix(in srgb, var(--base) 55%, var(--paper));
  --input-hover-border-color: var(--gray-800);

  --bs-border-radius-xs: 0.125rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius: 0.375rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 0.625rem;
  --bs-border-radius-xxl: 1rem;
  --bs-border-radius-pill: 50rem;

  --shadow-color: 47, 43, 61;
  --bs-box-shadow-xs: 0 0.0625rem 0.375rem 0 rgba(var(--shadow-color), 0.1);
  --bs-box-shadow-sm: 0 0.125rem 0.5rem 0 rgba(var(--shadow-color), 0.12);
  --bs-box-shadow: 0 0.1875rem 0.75rem 0 rgba(var(--shadow-color), 0.14);
  --bs-box-shadow-lg: 0 0.25rem 1.125rem 0 rgba(var(--shadow-color), 0.16);
  --bs-box-shadow-xl: 0 0.3125rem 1.875rem 0 rgba(var(--shadow-color), 0.18);

  /* Смысловые цвета. fill: заливка кнопки, on: текст на ней,
     text: текст на светлой подложке и на бумаге. */
  --bs-secondary: #808390;  --bs-secondary-rgb: 128, 131, 144;
  --bs-success: #28c76f;    --bs-success-rgb: 40, 199, 111;
  --bs-info: #00bad1;       --bs-info-rgb: 0, 186, 209;
  --bs-warning: #ff9f43;    --bs-warning-rgb: 255, 159, 67;
  --bs-danger: #ff4c51;     --bs-danger-rgb: 255, 76, 81;
  --bs-light: #dfdfe3;      --bs-light-rgb: 223, 223, 227;
  --bs-dark: #2f3349;       --bs-dark-rgb: 47, 51, 73;

  --secondary-fill: #737682; --secondary-on: #fff; --bs-secondary-text-emphasis: #686a75;
  --success-fill: #1b874b;   --success-on: #fff;   --bs-success-text-emphasis: #197d46;
  --info-fill: #008292;      --info-on: #fff;      --bs-info-text-emphasis: #007786;
  --warning-fill: #ff9f43;   --warning-on: #2f2b3d; --bs-warning-text-emphasis: #9c6129;
  --danger-fill: #d43f43;    --danger-on: #fff;    --bs-danger-text-emphasis: #bd383c;

  /* Подложка «метки»: 16 % цвета в бумаге, как $bg-label-tint-amount 84 % */
  --tint: 16%;
  --tint-hover: 24%;
  --hover-ink: #000;

  --bs-form-valid-color: var(--bs-success-text-emphasis);
  --bs-form-valid-border-color: var(--bs-success);
  --bs-form-invalid-color: var(--bs-danger-text-emphasis);
  --bs-form-invalid-border-color: var(--bs-danger);

  --bs-highlight-bg: #ffecd9;
  --bs-code-color: #d6336c;

  /* Каркас */
  --menu-width: 16.25rem;
  --menu-collapsed-width: 4.375rem;
  --navbar-height: 3.5rem;
  --gutter: 1.5rem;
  --content-max: 1440px;

  --menu-bg: var(--paper);
  --menu-color: #444050;
  --menu-hover-bg: color-mix(in srgb, var(--base) 6%, var(--menu-bg));
  --menu-open-bg: color-mix(in srgb, var(--base) 8%, var(--menu-bg));
  --menu-shadow: var(--bs-box-shadow-sm);

  --backdrop: #97959e;
  --backdrop-opacity: 0.5;
  --tooltip-bg: #2f2b3d;
  --tooltip-color: var(--paper);

  /* Движение. Длительности Vuexy: кнопки 135 мс, карточки и формы
     200 мс, меню и шторки 300 мс, окно 150 мс. */
  --ease: ease-in-out;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.135s;
  --duration: 0.2s;
  --duration-slow: 0.3s;
  --duration-modal: 0.15s;
}

/* -------------------------------------------------------------- тёмная тема */
[data-bs-theme="dark"] {
  color-scheme: dark;
  --hover-ink: #fff;

  --base: #e1def5;
  --base-rgb: 225, 222, 245;
  --paper: #2f3349;
  --paper-rgb: 47, 51, 73;
  --gray-25: #33374d;
  --gray-50: #3a3d53;
  --gray-75: #3d4157;
  --gray-100: #535876;
  --gray-200: #44485e;
  --gray-300: #64667d;
  --gray-400: #76778e;
  --gray-500: #9293ae;
  --gray-600: #9a9ab0;
  --gray-700: #acabc1;
  --gray-800: #bdbcd3;
  --gray-900: #cfcde4;

  --bs-body-color: #b8b7cc;          /* 6.3:1 на бумаге */
  --bs-body-color-rgb: 184, 183, 204;
  --bs-body-bg: #25293c;
  --bs-body-bg-rgb: 37, 41, 60;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-heading-color: #cfcde4;
  --bs-secondary-color: #aaaabf;     /* у Vuexy #76778e, 2.84:1; 4.67 на серой подложке */
  --bs-secondary-color-rgb: 170, 170, 191;
  --bs-tertiary-color: #76778e;
  --bs-tertiary-color-rgb: 118, 119, 142;
  --bs-secondary-bg: #44485e;
  --bs-secondary-bg-rgb: 68, 72, 94;
  --bs-tertiary-bg: #3a3d53;
  --bs-tertiary-bg-rgb: 58, 61, 83;

  --bs-border-color: #44485e;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --input-border-color: color-mix(in srgb, var(--base) 45%, var(--paper));  /* 3.2:1 */
  --input-hover-border-color: var(--gray-700);

  --shadow-color: 19, 17, 32;
  --bs-box-shadow-xs: 0 0.0625rem 0.375rem 0 rgba(var(--shadow-color), 0.16);
  --bs-box-shadow-sm: 0 0.125rem 0.5rem 0 rgba(var(--shadow-color), 0.18);
  --bs-box-shadow: 0 0.1875rem 0.75rem 0 rgba(var(--shadow-color), 0.2);
  --bs-box-shadow-lg: 0 0.25rem 1.125rem 0 rgba(var(--shadow-color), 0.22);
  --bs-box-shadow-xl: 0 0.3125rem 1.875rem 0 rgba(var(--shadow-color), 0.24);

  --bs-light: #494a5d;  --bs-light-rgb: 73, 74, 93;
  --bs-dark: #6b6c9d;   --bs-dark-rgb: 107, 108, 157;

  /* text светлее, чем у Vuexy: на подложке 24 % (мягкая кнопка под мышью) 4.5:1 */
  --secondary-fill: #737682; --secondary-on: #fff; --bs-secondary-text-emphasis: #bcbec6;
  --success-fill: #1b874b;   --success-on: #fff;   --bs-success-text-emphasis: #4fd98c;
  --info-fill: #008292;      --info-on: #fff;      --bs-info-text-emphasis: #4fd3e3;
  --warning-fill: #ff9f43;   --warning-on: #2f2b3d; --bs-warning-text-emphasis: #ffb46e;
  --danger-fill: #d43f43;    --danger-on: #fff;    --bs-danger-text-emphasis: #ff9ea1;

  --bs-highlight-bg: #66401b;
  --bs-code-color: #f5a3c8;

  --menu-bg: var(--paper);
  --menu-color: #cfcde4;
  --menu-shadow: var(--bs-box-shadow-sm);

  --backdrop: #171925;
  --backdrop-opacity: 0.6;
  --tooltip-bg: #f7f4ff;
  --tooltip-color: var(--paper);
}

/* ------------------------------------------------------------- цвет школы
   Цвет принадлежит школе, поэтому он задаётся темой отдельно от
   остального. Пять величин на каждую тему:
   primary          заливка кнопки, активный пункт меню, фокус
   primary-rgb      то же для прозрачностей Bootstrap
   primary-contrast текст на заливке (проверен на 4.5:1)
   primary-text     цвет как текст на бумаге и на своей подложке
   primary-hover    заливка при наведении
   Значения школьных цветов взяты из нынешнего brand.css, где они
   уже проверены на контраст; добавлен цвет Vuexy для сравнения. */
[data-skin="blue"] {
  --bs-primary: #0071d6; --bs-primary-rgb: 0, 113, 214;
  --primary-contrast: #fff; --primary-text: #005cae; --primary-hover: #005bb0;
}
[data-bs-theme="dark"][data-skin="blue"] {
  --bs-primary: #0088ff; --bs-primary-rgb: 0, 136, 255;
  --primary-contrast: #0a0f17; --primary-text: #59b2ff; --primary-hover: #339fff;
}
[data-skin="vuexy"] {
  --bs-primary: #6e63e6; --bs-primary-rgb: 110, 99, 230;
  --primary-contrast: #fff; --primary-text: #6258cc; --primary-hover: #635ad0;
}
[data-bs-theme="dark"][data-skin="vuexy"] {
  --primary-text: #a8a1f6;
}
[data-skin="lime"] {
  --bs-primary: #c1f742; --bs-primary-rgb: 193, 247, 66;
  --primary-contrast: #0a0f17; --primary-text: #567312; --primary-hover: #a9e01c;
  --primary-edge: #567312;
}
[data-bs-theme="dark"][data-skin="lime"] {
  --primary-text: #c1f742; --primary-hover: #d0f96e;
  --primary-edge: #c1f742;
}
[data-skin="coral"] {
  --bs-primary: #c2410c; --bs-primary-rgb: 194, 65, 12;
  --primary-contrast: #fff; --primary-text: #b63d0b; --primary-hover: #9a340a;
}
[data-bs-theme="dark"][data-skin="coral"] {
  --bs-primary: #f0a04b; --bs-primary-rgb: 240, 160, 75;
  --primary-contrast: #0a0f17; --primary-text: #f1a554; --primary-hover: #f5b671;
}
[data-skin="violet"] {
  --bs-primary: #7c3aed; --bs-primary-rgb: 124, 58, 237;
  --primary-contrast: #fff; --primary-text: #7b39eb; --primary-hover: #6425d0;
}
[data-bs-theme="dark"][data-skin="violet"] {
  --bs-primary: #a78bfa; --bs-primary-rgb: 167, 139, 250;
  --primary-contrast: #0a0f17; --primary-text: #baa5fb; --primary-hover: #bda5fb;
}
[data-skin="teal"] {
  --bs-primary: #0d9488; --bs-primary-rgb: 13, 148, 136;
  --primary-contrast: #0a0f17; --primary-text: #0a766d; --primary-hover: #10a193;
}
[data-bs-theme="dark"][data-skin="teal"] {
  --bs-primary: #2dd4bf; --bs-primary-rgb: 45, 212, 191;
  --primary-text: #2dd4bf; --primary-hover: #5ee0d0;
}
/* Малиновый сдвинут к розовому (оттенок 330° вместо 345°): #be123c
   стоял в 15° от красного «Удалить», и главная кнопка выглядела опасной */
[data-skin="rose"] {
  --bs-primary: #b81d6a; --bs-primary-rgb: 184, 29, 106;
  --primary-contrast: #fff; --primary-text: #b81d6a; --primary-hover: #9a1859;
}
[data-bs-theme="dark"][data-skin="rose"] {
  --bs-primary: #f472b6; --bs-primary-rgb: 244, 114, 182;
  --primary-contrast: #0a0f17; --primary-text: #f9a8d4; --primary-hover: #f68fc6;
}

/* Производные от цвета школы: одинаковы для всех школ */
:root,
[data-bs-theme] {
  --bs-primary-text-emphasis: var(--primary-text);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) var(--tint), var(--paper));
  --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 39%, var(--paper));
  --bs-link-color: var(--primary-text);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: color-mix(in srgb, var(--primary-text) 88%, #000);
  /* Край и кольцо фокуса: 3:1 к бумаге (WCAG 1.4.11, 2.4.11). У Vuexy
     кольцо это цвет школы на 55 %, у лайма на белом это 1.1:1, у
     остальных около 2:1. Край сплошной; для светлого лайма оливковый. */
  --bs-focus-ring-color: var(--primary-edge, var(--bs-primary));
  --ring: var(--primary-edge, var(--bs-primary));
  --primary-shadow: 0 0.125rem 0.375rem 0 color-mix(in srgb, var(--bs-primary) 30%, transparent);
}
/* В тёмной теме ссылка под мышью светлеет, а не темнеет (тёмнее она
   теряла контраст, 4.3:1 у синего и малинового) */
[data-bs-theme="dark"] {
  --bs-link-hover-color: color-mix(in srgb, var(--primary-text) 85%, #fff);
}