/* tokens.css — «Электронное КП» 5P.Lab: блок раздела 16 руководства Академии v0.2 без правок (стиль КП, 2.1 и 11); тема — data-theme на <html>, ставит js/theme-init.js. */

/* ==========================================================================
   5P Lab — Академия партнёров · токены стиля · v0.2 · 09.10.2026
   Источник: руководство «Фирменный стиль 5P Lab — для платформы», раздел 16.
   Файл лежит в web/assets/css/, шрифты — в web/assets/fonts/ (пути ../fonts/).
   Тема — атрибут data-theme на <html>.
   ========================================================================== */

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

:root{
  color-scheme:light;

  /* ---- Базовые цвета (не меняются от темы) ---- */
  --ink-950:#111111;
  --ink-900:#1A1A1A;
  --ink-800:#222221;
  --ink-700:#333333;
  --neutral-600:#6A6A68;
  --neutral-500:#919190;
  --neutral-400:#BFBFBC;
  --neutral-200:#DADAD9;
  --neutral-100:#DEDEDA;
  --paper-50:#F0F0EE;
  --paper-0:#F9F9F8;
  --white:#FFFFFF;
  --teal-400:#20CBBA;
  --teal-500:#01C4B1;
  --teal-700:#0E8E82;
  --teal-800:#0B7A70;
  --orange-400:#FF7452;
  --orange-500:#FF5A36;
  --orange-600:#F24E2A;
  --orange-800:#B83C0A;
  --red-400:#FF6B81;
  --red-500:#E5294F;
  --red-700:#B8203E;
  --amber-400:#E6A15C;
  --amber-700:#8C5B0D;

  /* ---- Рабочие токены: светлая тема ---- */
  --bg:#F0F0EE;
  --surface:#F9F9F8;
  --surface-2:#FFFFFF;
  --surface-hover:rgba(26,26,26,.035);
  --surface-inverse:#1A1A1A;
  --on-inverse:#F9F9F8;

  --text:#1A1A1A;
  --text-2:#333333;
  --text-muted:#6A6A68;
  --text-faint:#919190;

  --line:rgba(26,26,26,.12);
  --line-soft:rgba(26,26,26,.06);
  --line-strong:rgba(26,26,26,.28);
  --track:rgba(26,26,26,.10);
  --dots:rgba(26,26,26,.12);

  /* бирюза — бренд: действие, прогресс, «пройдено», выбор, фокус */
  --brand:#01C4B1;
  --brand-hover:#20CBBA;
  --on-brand:#1A1A1A;
  --brand-text:#0B7A70;
  --brand-soft:#E0F4F1;
  --brand-line:rgba(1,196,177,.55);

  /* оранжевый — второй акцент: выделение, итог, «горячее», активное в админке */
  --accent:#FF5A36;
  --accent-hover:#FF7452;
  --on-accent:#1A1A1A;
  --accent-large:#F24E2A;
  --accent-text:#B83C0A;
  --accent-soft:#F9ECE8;
  --accent-line:rgba(255,90,54,.55);

  /* красный — только ошибка, «не сдан», удаление */
  --danger:#E5294F;
  --danger-text:#B8203E;
  --danger-soft:#F7E8EA;

  /* янтарь — внимание: черновик, не сохранено, срок */
  --warn:#E6A15C;
  --warn-text:#8C5B0D;
  --warn-soft:#F6EDE2;

  /* выделение цветом в тексте урока (редактор, Т-88): фон под графитовым текстом */
  --mark-brand:#C2EDE8;
  --mark-accent:#FAD9D1;
  --mark-neutral:#E7E7E6;

  --focus:#01C4B1;
  --scrim:rgba(12,12,12,.56);

  /* верхняя панель — графитовая в обеих темах */
  --topbar-bg:rgba(26,26,26,.96);
  --topbar-text:#F9F9F8;
  --topbar-muted:#BFBFBC;
  --topbar-line:rgba(249,249,248,.14);

  /* ---- Рамки, тени, свечение ---- */
  --frame:inset 0 0 0 1px var(--line);
  --frame-strong:inset 0 0 0 1px var(--line-strong);
  --frame-brand:inset 0 0 0 1px var(--brand);
  --frame-accent:inset 0 0 0 1px var(--accent);
  --frame-accent-2:inset 0 0 0 2px var(--accent);
  --frame-danger:inset 0 0 0 1px var(--danger);
  --shadow-card:0 1px 2px rgba(26,26,26,.04),0 8px 24px rgba(26,26,26,.06);
  --shadow-pop:0 2px 6px rgba(26,26,26,.06),0 18px 44px rgba(26,26,26,.14);
  --shadow-modal:inset 0 0 0 1px var(--line),0 24px 70px rgba(0,0,0,.28);
  --shadow-brand:0 8px 22px rgba(1,196,177,.30);
  --shadow-accent:0 8px 22px rgba(255,90,54,.28);
  --glow:0 0 0 1px rgba(1,196,177,.14),0 0 12px rgba(1,196,177,.50),0 0 32px rgba(1,196,177,.14),0 0 64px rgba(1,196,177,.07);
  --glow-soft:0 0 24px rgba(1,196,177,.12),0 0 60px rgba(1,196,177,.05);
  --glow-accent:0 0 0 1px rgba(255,90,54,.16),0 0 12px rgba(255,90,54,.45),0 0 32px rgba(255,90,54,.14),0 0 64px rgba(255,90,54,.06);
  --glow-accent-soft:0 0 24px rgba(255,90,54,.12),0 0 60px rgba(255,90,54,.05);

  /* ---- Шрифт и типографика ---- */
  --font-sans:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-serif:'PT Serif',Georgia,Cambria,'Noto Serif','Times New Roman',serif;
  --font-mono:ui-monospace,'SF Mono','PT Mono',Menlo,Consolas,'Liberation Mono','Noto Sans Mono','Courier New',monospace;
  --fw-thin:200;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  --fs-display:clamp(34px,3.6vw,48px);
  --fs-h1:clamp(28px,2.6vw,36px);
  --fs-h2:24px;
  --fs-h3:19px;
  --fs-h4:16px;
  --fs-read:17px;
  --fs-body:15px;
  --fs-sm:13.5px;
  --fs-xs:12px;
  --fs-eyebrow:12px;
  --fs-num-xl:clamp(40px,4.4vw,56px);
  --fs-num-lg:32px;

  --lh-solid:1;
  --lh-tight:1.1;
  --lh-snug:1.3;
  --lh-body:1.55;
  --lh-read:1.65;

  --tr-display:-0.03em;
  --tr-heading:-0.02em;
  --tr-caps:0.16em;

  /* ---- Отступы: шаг 8, полушаг 4 ---- */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-15:60px;
  --space-20:80px;

  /* ---- Каркас ---- */
  --container:1280px;
  --container-wide:1440px;
  --page-pad:40px;
  --topbar-h:64px;
  --rail:264px;
  --admin-nav:240px;
  --props:320px;
  --editor-bar-h:56px;
  --toolbar-h:52px;
  --gutter:24px;
  --reading:720px;

  /* ---- Углы и рамки: бренд острый ---- */
  --radius-0:0;
  --radius-pill:999px;
  --radius-round:50%;
  --border-hair:1px;
  --border-thick:2px;
  --edge:3px;

  /* ---- Движение ---- */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-slow:360ms;

  /* ---- Штрих из знака: наклон полос 72° ---- */
  --stripe-angle:108deg;

  /* ---- Слои ---- */
  --z-sticky:10;
  --z-topbar:20;
  --z-rail:30;
  --z-dropdown:40;
  --z-modal:1000;
  --z-toast:1100;

  /* ---- Совместимость с v0.1: старые имена ведут на новые.
     Удалить, когда поиск по web/ не найдёт ни одного --hot и --coral. ---- */
  --hot:var(--danger);
  --hot-text:var(--danger-text);
  --hot-soft:var(--danger-soft);
  --coral-500:var(--red-500);
  --coral-700:var(--red-700);
}

[data-theme="dark"]{
  color-scheme:dark;

  --bg:#1A1A1A;
  --surface:#111111;
  --surface-2:#222221;
  --surface-hover:rgba(249,249,248,.04);
  --surface-inverse:#2B2B2A;
  --on-inverse:#F9F9F8;

  --text:#F9F9F8;
  --text-2:#DEDEDA;
  --text-muted:#BFBFBC;
  --text-faint:#7A7A77;

  --line:rgba(249,249,248,.14);
  --line-soft:rgba(249,249,248,.07);
  --line-strong:rgba(249,249,248,.30);
  --track:rgba(249,249,248,.12);
  --dots:rgba(249,249,248,.10);

  --brand:#01C4B1;
  --brand-hover:#20CBBA;
  --on-brand:#1A1A1A;
  --brand-text:#20CBBA;
  --brand-soft:#0F2A27;
  --brand-line:rgba(1,196,177,.60);

  --accent:#FF5A36;
  --accent-hover:#FF7452;
  --on-accent:#1A1A1A;
  --accent-large:#FF5A36;
  --accent-text:#FF5A36;
  --accent-soft:#321B16;
  --accent-line:rgba(255,90,54,.60);

  --danger:#E5294F;
  --danger-text:#FF6B81;
  --danger-soft:#33151B;

  --warn:#E6A15C;
  --warn-text:#E6A15C;
  --warn-soft:#2F251C;

  --mark-brand:#0D403B;
  --mark-accent:#54251B;
  --mark-neutral:#2D2D2D;

  --focus:#01C4B1;
  --scrim:rgba(0,0,0,.66);

  --shadow-card:0 0 0 0 transparent;
  --shadow-pop:0 18px 44px rgba(0,0,0,.50);
  --shadow-modal:inset 0 0 0 1px var(--line),0 24px 70px rgba(0,0,0,.60);
  --shadow-brand:0 8px 22px rgba(1,196,177,.22);
  --shadow-accent:0 8px 22px rgba(255,90,54,.22);
}

@media (max-width:1079.98px){:root{--page-pad:24px}}
@media (max-width:719.98px){:root{--page-pad:16px;--topbar-h:56px}}