/* Design tokens. Source of truth: design-system.md.
   Редизайн 3 «Лаванда на бумаге» (06.10): тёплая бумага вместо белого, наш фиолетовый
   как единственный яркий цвет, чернила для главной кнопки, лаванда/слива для «сейчас»,
   шалфей и абрикос для меток. Образец — _prototypes/prototype-4-redesign-3.html. */

:root {
  color-scheme: light;

  /* Brand (shared). Deliberately NOT ithub.ru's own values — see design-system.old.md §1:
     same family, deeper and tinted toward violet, so we read as related but not identical. */
  --brand: #7A1FC9;
  --brand-bright: #B07CFF;
  --brand-deep: #4E0F87;
  --brand-200: #EADCFA;
  --brand-300: #C79BF5;
  --cyan: #4E9C99;

  /* Редизайн 3: рампа бренда и роли, которых раньше не было */
  --paper: #F6F2EC;
  --lavender: #E4DAF3;
  --plum: #34184F;
  --now-bg: var(--lavender);   /* «сейчас»: ближайшая пара, живая запись, выбранный тариф */
  --now-fg: var(--plum);
  --now-2: rgba(52, 24, 79, 0.66);
  --cta-bg: #16121C;           /* главная кнопка — чернильная; фиолетовая только у агента */
  --cta-fg: var(--paper);
  --shadow-card: 0 1px 2px rgba(52, 24, 79, 0.05), 0 12px 32px -16px rgba(52, 24, 79, 0.18);

  /* Surfaces & ink. Тёплые нейтрали: бумага, белый лист, песок, глина, камень, графит. */
  --bg: #F6F2EC;
  --bg-glow: transparent;
  --surface: #FFFDF9;
  --surface-2: #ECE6DD;
  --surface-raised: #FFFDF9;
  --border: rgba(52, 24, 79, 0.09);
  --border-strong: #D9D0C4;
  --text: #16121C;
  --text-2: #4F4943;
  --text-3: #766D64;    /* 4.5:1 на бумаге; #8A8178 из первой версии палитры не проходил */

  /* Accent roles */
  --accent: #7A1FC9;
  --accent-hover: #6A1AB0;
  --accent-text: #7A1FC9;
  --accent-soft: #E4DAF3;
  --accent-ink: #34184F;
  --on-accent: #FFFFFF;
  --spot: rgba(122, 31, 201, 0.08);
  --spot-border: rgba(122, 31, 201, 0.55);

  /* Status */
  --success: #5E7A3A;          /* шалфей, тёмный: «готово», «сдано» */
  --success-soft: #E6ECD9;
  --warning: #C8875A;          /* абрикос: сроки; 13.10 приглушён, сигнал, но не крик */
  --warning-soft: #F8E3D2;
  --danger: #C23A3F;
  --danger-text: #A8282D;
  --live: var(--lavender);     /* «идёт сейчас» — та же лаванда, что у ближайшей пары */
  --live-ink: var(--plum);

  /* Палитра «Шпаргалка» (редизайн 1.0, design-system.old.md §1). Заливки одинаковые
     в обеих темах, текстовые варианты свои у каждой. Текст на заливке — --ink,
     белый только на фиолетовом. */
  --ink: #16121C;
  /* Цвета предметов (13.10, Max: «как шалфей — цвет есть, но спокойно»). Одна насыщенность и одна
     светлота у всех (OKLCH C 0.065 / L 0.72, как у шалфея), отличаются только оттенком, разнесённым
     по кругу: вереск 350°, абрикос 55°, шалфей 123°, бирюза 190°, небо 235°, ирис 282°. Приглушённые
     цвета на близких оттенках сливаются — новый цвет только в свободный промежуток круга. Ни один
     не ярче шалфея; громкий у продукта один — фиолетовый действия. */
  --lime: #A9B98A;
  --lime-text: #4D5A33;
  --heather: #C594AA;
  --heather-text: #724A5D;
  --tang: #C59A7E;
  --tang-text: #724F37;
  --teal: #73B2AE;       /* бирюза предмета; --cyan выше — фирменная пара глитча и зверька, её не трогаем */
  --teal-text: #2A635F;
  --blue: #7CACC8;
  --blue-text: #345D75;
  --iris: #9EA0CD;       /* ирис вместо фиолетового: фиолетовый — только действие и «сейчас» */
  --iris-text: #525479;

  /* Main v2: у оттенка три ступени — точка (выше), подложка (-soft) и текст на ней (-ink),
     подложка и текст всегда вместе. Цвет приходит подложкой, не акцентом, и только там,
     где что-то значит. Подложка ириса синее лаванды «сейчас» (#E4DAF3). */
  --iris-soft: #E7E8F8;     --iris-ink: #48496D;
  --teal-soft: #DAEFED;     --teal-ink: #1D5754;
  --lime-soft: #E6EDD9;     --lime-ink: #45592B;
  --heather-soft: #F6E4EB;  --heather-ink: #663F52;
  --tang-soft: #F6E6DC;     --tang-ink: #66442C;
  --blue-soft: #DCECF6;     --blue-ink: #295269;
  /* Масло — «новое» (свежие баллы из ЛК). Не цвет предмета. */
  --butter: #CEBD8A;
  --butter-soft: #EFE9D9;   --butter-ink: #594C24;

  /* Маркер термина: на светлой — нижние 46% строки под тёмным текстом; на тёмной
     во всю высоту, иначе полупрозрачный лайм поверх фиолетово-чёрного — олива. */
  --marker: #A9B98A;
  --marker-h: 46%;
  --marker-ink: #16121C;

  /* Typography */
  /* Onest — весь текст и подзаголовки карточек; Unbounded — только крупные заголовки
     экранов (--font-headline, расставляется в css/theme.css). */
  --font-display: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-headline: "Unbounded", "Onest", system-ui, sans-serif;
  --font-pixel: "Silkscreen", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-48: 3rem;
  --fs-64: 4rem;

  /* Spacing (4px step) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Radii */
  --r-sm: 10px;
  --r-md: 14px;   /* поля */
  --r-lg: 18px;   /* вложенные плоскости */
  --r-xl: 28px;   /* карточки */
  --r-full: 999px;

  /* Elevation */
  --shadow-sm: none;
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-inset: none;
  --glow-accent: 0 8px 24px rgba(122, 31, 201, 0.28);
  --focus-ring: 0 0 0 3px var(--accent-soft);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  /* A soft spring, ~5% overshoot: the tab bar bubble landing on a tab. */
  --ease-spring-soft: linear(0, 0.06 2.5%, 0.22 5.5%, 0.5 10.5%, 0.78 17%, 0.95 24%, 1.03 31%, 1.05 37%, 1.035 45%, 1.01 56%, 0.998 70%, 1);
  --dur-micro: 180ms;
  --dur-state: 320ms;
  --dur-step: 650ms;

  /* Layers */
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-toast: 400;

  --container: 1200px;
  --gutter: 16px;
}
/* Safari before 17.2 has no linear(): an overshooting bezier instead, or the whole transition is dropped. */
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring-soft: cubic-bezier(0.34, 1.3, 0.64, 1); }
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

/* Паник-кнопка (js/panic.js): «документ» светлый и серый в любой теме —
   тёмная страница в фиолетовом тоне выдала бы платформу с первого взгляда. */
:root {
  --pn-bg: #FFFFFF;
  --pn-text: #5F6368;
  --pn-title: #3C4043;
  --pn-rule: #E3E3E3;
}

/* «Смотреть с этого места» (css/recplay.css): a dark cinema card in either theme — a recording is watched in the
   dark, and the teacher's screen share is mostly white, a light card around it melted into it. */
:root {
  --rp-bg: #120E19;
  --rp-bg-2: #1C1626;
  --rp-stage: #000000;
  --rp-text: #F5F1FA;
  --rp-text-2: rgb(245 241 250 / 0.68);
  --rp-text-3: rgb(245 241 250 / 0.44);
  --rp-glass: rgb(255 255 255 / 0.08);
  --rp-glass-hover: rgb(255 255 255 / 0.15);
  --rp-line: rgb(255 255 255 / 0.1);
  --rp-glow: rgb(176 124 255 / 0.22);
  --rp-accent: var(--brand-bright);
  --rp-scrim: rgb(8 6 12 / 0.72);
}

/* Талисман (js/mascot.js). Бумага шпаргалки светлая в обеих темах, но на светлой
   теме она лавандовая: чисто белая пропадала бы на белой карточке. */
:root {
  --mc-body: var(--brand);
  --mc-shade: var(--brand-deep);
  --mc-blush: var(--brand-300);
  --mc-eye: #FFFFFF;
  --mc-ink: #1B0B33;
  --mc-paper: var(--brand-200);
  --mc-line: #1FB5C0;
}
:root[data-theme="dark"] {
  --mc-body: var(--brand-bright);
  --mc-shade: var(--brand);
  --mc-blush: #D9BFFF;
  --mc-paper: #FFFFFF;
  --mc-line: var(--cyan);
}

/* Огонёк (js/streak.js): warm fire at first, our violet from 30 days on. */
:root {
  --fl-outer: #E8622C;
  --fl-mid: #F59E3A;
  --fl-core: #FFD36B;
  --fl-hot: #FFF4CF;
  --fl-v-outer: var(--brand);
  --fl-v-mid: var(--brand-300);
  --fl-v-core: #FFFFFF;
  --fl-off: #B9B2C4;
}
:root[data-theme="dark"] {
  --fl-outer: #FF7A45;
  --fl-mid: #FFAE52;
  --fl-core: #FFDB7A;
  --fl-v-outer: var(--brand-bright);
  --fl-v-mid: #D9BFFF;
  --fl-off: #5E5470;
}

/* Зверёк на фиолетовой плашке (стейдж онбординга, шторка перехода): тело
   фирменного цвета там растворилось бы в фоне, поэтому он светлее. */
.mc-on-brand {
  --mc-body: var(--brand-300);
  --mc-shade: var(--brand-bright);
  --mc-blush: var(--brand-200);
  --mc-paper: #FFFFFF;
  --mc-line: var(--cyan);
}

/* Dark theme: explicit choice wins; system preference applies when nothing is stored. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Не чёрный #000, а слива-почти-чёрный: тема тёплая и ночью. */
  --bg: #110D16;
  --bg-glow: transparent;
  --surface: #1B1622;
  --surface-2: #262030;
  --surface-raised: #211B29;
  --border: rgba(246, 242, 236, 0.08);
  --border-strong: #3A3343;
  --text: #F6F2EC;
  --text-2: #C2B9C6;
  --text-3: #8F8697;

  --accent: #8E3BE0;
  --accent-hover: #A363EC;
  --accent-text: #B48CFF;
  --accent-soft: #2C1F3F;
  --accent-ink: #D9C4FF;
  --on-accent: #FFFFFF;
  --spot: rgba(180, 140, 255, 0.10);
  --spot-border: rgba(180, 140, 255, 0.7);

  --now-bg: var(--plum);
  --now-fg: var(--paper);
  --now-2: rgba(246, 242, 236, 0.66);
  --cta-bg: var(--paper);
  --cta-fg: #16121C;
  --shadow-card: 0 0 0 1px rgba(246, 242, 236, 0.08);

  --success: #A9B98A;
  --success-soft: rgba(169, 185, 138, 0.16);
  --warning: #F0B48A;
  --warning-soft: rgba(240, 180, 138, 0.16);
  --danger: #FF8A8E;
  --danger-text: #FF8A8E;
  --live: var(--plum);
  --live-ink: var(--paper);

  --lime-text: #A9B98A;
  --heather-text: #DAB0C3;
  --tang-text: #DBB59D;
  --teal-text: #95CAC5;
  --blue-text: #9CC4DD;
  --iris-text: #B7BAE1;
  --iris-soft: color-mix(in srgb, var(--iris) 24%, var(--surface));       --iris-ink: #C5C7EB;
  --teal-soft: color-mix(in srgb, var(--teal) 24%, var(--surface));       --teal-ink: #A6D6D2;
  --lime-soft: color-mix(in srgb, var(--lime) 24%, var(--surface));       --lime-ink: #B9CF9A;
  --heather-soft: color-mix(in srgb, var(--heather) 24%, var(--surface)); --heather-ink: #E5BECF;
  --tang-soft: color-mix(in srgb, var(--tang) 24%, var(--surface));       --tang-ink: #E5C3AC;
  --blue-soft: color-mix(in srgb, var(--blue) 24%, var(--surface));       --blue-ink: #ACD1E7;
  --butter-soft: color-mix(in srgb, var(--butter) 24%, var(--surface));   --butter-ink: #D6CAA6;
  --marker: rgba(169, 185, 138, 0.42);
  --marker-ink: #F6F2EC;
  --marker-h: 100%;

  --shadow-sm: none;
  --shadow-md: 0 0 0 1px rgba(246, 242, 236, 0.08);
  --shadow-inset: none;
  --glow-accent: none;
  --focus-ring: 0 0 0 3px rgba(142, 59, 224, 0.45);
}

/* ---------- Печать ---------- */
/* Бумага всегда светлая. Тёмная тема на печати — это либо белый по белому,
   либо залитый чернилами лист, и оба варианта студент оплачивает сам.
   Переопределяем ТОКЕНЫ, а не компоненты: всё остальное в проекте покрашено
   через них, поэтому одного этого блока хватает на весь интерфейс.
   Селектор с [data-theme="dark"] обязателен — иначе тёмная тема выигрывает
   по специфичности и переопределение не сработает. */
@media print {
  :root,
  :root[data-theme="dark"] {
    color-scheme: light;

    --bg: #FFFFFF;
    --bg-glow: transparent;
    --surface: #FFFFFF;
    --surface-2: #F2F0F7;
    --surface-raised: #FFFFFF;
    --border: #C9C3D6;
    --border-strong: #8C8599;
    --text: #000000;
    --text-2: #2B2733;
    --text-3: #4A4455;

    --accent: #4E0F87;
    --accent-hover: #4E0F87;
    --accent-text: #4E0F87;
    --accent-soft: #EADCFA;
    --accent-ink: #3A0B66;
    --on-accent: #FFFFFF;
    --spot: transparent;
    --spot-border: #8C8599;

    --success: #2A7A0B;
    --success-soft: #EFF7EA;
    --warning: #8A6400;
    --warning-soft: #FBF4E2;
    --danger: #A32626;
    --danger-text: #A32626;
    --live: #EDEBF5;
    --live-ink: #16121F;

    --teal-text: #004E4B;
    --lime-text: #435E00;
    --heather-text: #5E3248;
    --tang-text: #5F371B;
    --blue-text: #134862;
    --iris-text: #3D3D67;
    --marker-h: 46%;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-inset: none;
    --glow-accent: none;
    --focus-ring: none;
  }

  /* Фоновые заливки браузеры по умолчанию не печатают — плашки предмета и
     бейджи без этого выходят белыми прямоугольниками с белым текстом. */
  body { background: #FFFFFF; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Слои, которые к содержимому не относятся вообще, ни на одном экране. */
  .ambient,
  .toast,
  .wipe,
  .inst,
  [popover] { display: none !important; }

  /* Самое важное правило во всём блоке. `motion.revealOnScroll` ставит
     секциям inline `opacity: 0` и снимает его, когда до них доскроллили.
     На печати прокрутки нет — и без этого конспект печатался до того места,
     до которого студент успел дочитать, а остальное уходило пустыми страницами.
     `!important` обязателен: GSAP пишет в inline-стиль. */
  * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
    filter: none !important;
  }
}

/* Header height: every screen's top bar and whatever sticks under it. */
:root { --top-h: 52px; }
@media (min-width: 900px) { :root { --top-h: 76px; } }