/* ТехКарта — кабинет. Изначально направление «Бланк» (design-audit/plan.md, раздел 4):
   токены, оболочка с вертикальным меню и общие компоненты.
   Все размеры — реальные CSS-пиксели: масштаба под ширину окна больше нет,
   поэтому кегли совпадают со шкалой 4.3 на любом экране и растут с Ctrl+. */

/* Стили разнесены по файлам css/cabinet/*.css (#48) и подключаются строго в этом
   порядке каскада: base → shell → controls → forms → cards → overlays → tables →
   bars → responsive → tiles → partials. Здесь — шрифты, токены и сброс (разделы 0–2);
   раздел 30 «Стиль по референсам» и блок-подсказка — в конце partials.css. */

/* ============================================================ 0. Шрифты */
/* «Urok Text» — Lato 2.015, урезанный до латиницы, кириллицы, основных греческих букв и знаков сайта
   (fonts/LATO-OFL.txt): по OFL изменённую версию нельзя называть «Lato». Для всего текста. Знаки,
   которых в нём нет, берутся из следующих шрифтов стека; «₽» нет ни в одном нашем шрифте — его
   рисует системный, как и раньше. */
@font-face {
  font-family: "Urok Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/urok-text-400.woff2") format("woff2");
}
@font-face {
  font-family: "Urok Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/urok-text-500.woff2") format("woff2");
}
@font-face {
  font-family: "Urok Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/urok-text-600.woff2") format("woff2");
}
@font-face {
  font-family: "Urok Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/urok-text-700.woff2") format("woff2");
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/golos-text-cyrillic-ext.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: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/golos-text-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/golos-text-latin.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;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/fonts/manrope-latin.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;
}

/* ============================================================ 1. Токены */
/* Белые карточки с мягкой тенью на тёплом фоне, основной цвет — для действий. Тёмная тема —
   те же токены с другими значениями, компоненты не переопределяются. */
:root {
  color-scheme: light;
  /* Коммерческий стиль (ветка redesign, 2026-10-10): фиолетовый основной цвет, нейтральный светлый фон,
     яркие школьные акценты — солнце, коралл, мята, небо */
  --ink: #1f1b3a;
  --text-2: #5f5b76;
  --muted: #5f5b76;
  --primary: #5b3df5;
  --primary-hover: #4a2de0;
  --primary-tint: #efebff;
  --primary-edge: rgba(91, 61, 245, 0.22);
  --pastel-yellow-edge: rgba(230, 160, 0, 0.32);
  --pastel-pink-edge: rgba(235, 70, 120, 0.24);
  --pastel-mint-edge: rgba(20, 160, 110, 0.26);
  --pastel-lilac-edge: rgba(120, 80, 240, 0.24);
  --pastel-sky-edge: rgba(20, 140, 220, 0.26);
  --pastel-peach-edge: rgba(240, 100, 60, 0.26);
  --pastel-lime-edge: rgba(120, 170, 20, 0.3);
  --success-edge: rgba(20, 150, 100, 0.28);
  --warning-edge: rgba(214, 145, 20, 0.35);
  --error-edge: rgba(220, 50, 70, 0.24);
  --link: var(--primary);
  --link-hover: var(--primary-hover);
  --on-primary: #ffffff;
  --bg: #f7f6fb;
  --band: #f3efff;
  --surface: #ffffff;
  --surface-2: #f2f0f8;
  --line: #e7e4f0;
  --line-strong: #8f8aa3;
  --success: #12875b;
  --success-tint: #e2f7ee;
  --warning: #a35f00;
  --warning-tint: #fff4dd;
  --warning-line: #f2c86b;
  --error: #d42a46;
  --error-hover: #b31f38;
  --error-tint: #fdeaee;
  --focus: var(--primary);
  --scrim: rgba(31, 27, 58, 0.45);
  --pastel-yellow: #fff1c7;
  /* Заливка пометок «[впишите …]» (<mark>) — жёлтая, как в DOCX */
  --mark-bg: #fff3a3;
  --pastel-pink: #ffe3ec;
  --pastel-blue: #ebe7ff;
  --pastel-mint: #d9f6ea;
  --pastel-lilac: #efe6ff;
  --pastel-sky: #dcf0fd;
  --pastel-peach: #ffe5d8;
  --pastel-lime: #edf7d2;
  --scrollbar: rgba(31, 27, 58, 0.22);
  /* Яркие цвета иллюстраций и акцентов */
  --sun: #ffc83d;
  --coral: #ff6b57;
  --mint: #22c39a;
  --sky: #36a9f5;
  --berry: #ff5d9e;
  --grape: #8b6cff;
  --chalk: #2f6b57;
  --ill-paper: #ffffff;
  --ill-line: #1f1b3a;

  --font-sans: "Urok Text", "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: var(--font-sans);
  /* Заголовки — Manrope: современный гротеск, «продуктовее» Lato (Nunito выглядел детским) */
  --font-display: "Manrope", "Urok Text", "Golos Text", system-ui, sans-serif;

  /* Кегли: основные 16 и 14, заголовки жирным гротеском */
  --t-hero: 800 40px/48px var(--font-display);
  --t-h1: 800 36px/44px var(--font-display);
  --t-h2: 800 28px/36px var(--font-display);
  --t-h3: 800 20px/28px var(--font-display);
  --t-lead: 400 18px/28px var(--font-sans);
  --t-text: 400 16px/24px var(--font-sans);
  --t-small: 400 14px/20px var(--font-sans);
  --t-caption: 500 14px/20px var(--font-sans);

  --r-4: 4px;
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-24: 24px;
  --shadow-card: 0 4px 24px rgba(60, 40, 120, 0.08);
  --shadow-card-hover: 0 12px 36px rgba(60, 40, 120, 0.16);
  --shadow-dialog: 0 16px 48px rgba(31, 27, 58, 0.22);
  --shadow-sheet: var(--shadow-card);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  --side-w: 256px;
  --side-w-collapsed: 72px;
  --page-pad: 32px;
  --content-max: 1200px;
}

/* Тёмная тема — только по выбору в меню; без выбора сайт светлый */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #efecfb;
  --text-2: #b0aac8;
  --muted: #b0aac8;
  --primary: #7b62ff;
  --primary-hover: #8c77ff;
  --primary-tint: #2a2350;
  --primary-edge: rgba(170, 150, 255, 0.3);
  --pastel-yellow-edge: rgba(255, 200, 80, 0.3);
  --pastel-pink-edge: rgba(255, 130, 170, 0.28);
  --pastel-mint-edge: rgba(70, 210, 160, 0.28);
  --pastel-lilac-edge: rgba(170, 150, 255, 0.28);
  --pastel-sky-edge: rgba(90, 190, 245, 0.28);
  --pastel-peach-edge: rgba(255, 150, 110, 0.28);
  --pastel-lime-edge: rgba(180, 220, 90, 0.28);
  --success-edge: rgba(70, 210, 160, 0.32);
  --warning-edge: rgba(242, 180, 68, 0.32);
  --error-edge: rgba(255, 107, 122, 0.32);
  --link: #ab9cff;
  --link-hover: #c4b9ff;
  --bg: #15122a;
  --band: #1d1940;
  --surface: #1f1b3a;
  --surface-2: #28234a;
  --line: #352f5e;
  --line-strong: #6c6690;
  --success: #46d2a0;
  --success-tint: #123227;
  --warning: #f2b444;
  --warning-tint: #33270f;
  --warning-line: #6b5420;
  --error: #ff6b7a;
  --error-hover: #ff8592;
  --error-tint: #3a1a24;
  --focus: #ab9cff;
  --scrim: rgba(0, 0, 0, 0.6);
  --pastel-yellow: #352c16;
  --mark-bg: var(--warning-edge);
  --pastel-pink: #361c2b;
  --pastel-blue: #262150;
  --pastel-mint: #143329;
  --pastel-lilac: #2a2050;
  --pastel-sky: #142c40;
  --pastel-peach: #3a2219;
  --pastel-lime: #283015;
  /* Иллюстрации и в тёмной теме — светлые «наклейки» с чернильным контуром: тёмная бумага сливалась с фоном */
  --ill-paper: #f4f1ff;
  --ill-line: #1f1b3a;
  --scrollbar: rgba(232, 238, 246, 0.25);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-dialog: 0 16px 48px rgba(0, 0, 0, 0.55);
}

@media (max-width: 1279px) {
  :root {
    --page-pad: 24px;
  }
}

@media (max-width: 767px) {
  :root {
    --t-hero: 800 30px/38px var(--font-display);
    --t-h1: 800 28px/36px var(--font-display);
    --t-h2: 800 24px/32px var(--font-display);
    --t-h3: 800 18px/26px var(--font-display);
    --t-lead: 400 18px/28px var(--font-sans);
    --page-pad: 16px;
  }
}

/* Совместимые имена токенов: ими написаны правила, которые main добавил после
   ответвления дизайна (тарифы, плашки тарифа), и стили React-компонентов.
   Ссылаются на новые токены, поэтому работают и в тёмной теме. */
:root {
  --tk-zoom: 1;
  --white: var(--surface);
  --canvas: var(--surface);
  --surface-strong: var(--surface-2);
  --surface-dark: #1f1b3a;
  --surface-dark-elevated: #1c2a3b;
  --ink-strong: var(--ink);
  --text-body: var(--ink);
  --text-muted: var(--text-2);
  --muted-fg: var(--text-2);
  --muted-border: var(--line);
  --muted-pressed: var(--surface-2);
  --hairline: var(--line);
  --hairline-soft: var(--line);
  --gray-50: var(--surface-2);
  --gray-100: var(--line);
  --gray-200: var(--line);
  --gray-400: var(--line-strong);
  --gray-500: var(--text-2);
  --gray-600: var(--text-2);
  --gray-800: var(--ink);
  --gray-900: var(--ink);
  --blue-50: var(--primary-tint);
  --blue-200: var(--primary-edge);
  --blue-500: var(--primary);
  --blue-600: var(--primary-hover);
  --primary-active: var(--primary-hover);
  --primary-disabled: var(--line-strong);
  --red-500: var(--error);
  --font-body: var(--font-sans);
  --font-ui: var(--font-sans);
  --font-head: var(--font-display);
  --font-mono: var(--font-sans);
  --fs-12: 12px;
  --fs-13: 14px;
  --fs-14: 14px;
  --fs-16: 16px;
  --radius-md: var(--r-8);
  --radius-lg: var(--r-12);
  --radius-xl: var(--r-16);
  --radius-pill: 9999px;
}

/* ============================================================ 2. Сброс и база */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Атрибут hidden всегда побеждает display компонентов (кнопки, сетки) */
[hidden] {
  display: none !important;
}

html {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--t-text);
}

/* Пометки «[впишите …]» самоанализа: без стилей <mark> — системный жёлтый с чёрным текстом, в тёмной теме
   слепил (techkarta-back#161) */
mark {
  background: var(--mark-bg);
  color: var(--ink);
  border-radius: 3px;
  padding: 0 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}

/* Ссылки в тексте отличаются не только цветом (WCAG 1.4.1) */
a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--primary-hover);
  text-decoration-thickness: 2px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Одно кольцо фокуса на весь сайт (WCAG 2.4.7). all: unset не используем: он
   сбрасывает и браузерное кольцо. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

.tk-icon {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

::selection {
  background: var(--primary);
  color: var(--on-primary);
}

.visually-hidden,
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 16px;
  clip: auto;
  background: var(--surface);
  border-radius: var(--r-8);
  color: var(--ink);
  font-weight: 600;
}