/* Токены дизайн-системы Pronina school: цвета обеих тем и шкалы.
   Правила — app/static/ds/DESIGN.md. Подключается ПЕРВОЙ таблицей стилей на
   каждой странице (до dashboard.css), стиль акцента app/accent.py — после
   всех таблиц: у него тот же селектор :root, побеждает стоящий ниже.

   Темы две: тёмная (значения прямо в :root) и светлая. «Как в системе» —
   не третий набор цветов, а выбор между первыми двумя: его делает
   theme.js и ставит на <html> атрибут data-theme. Светлая описана ОДИН
   раз и разъехаться сама с собой не может. Приём взят из Bot funnel.

   Цвета графиков и метрик (--c-*) — в hex, а не в oklch: их читает
   dashboard.js для ECharts, а тот рисует на canvas и сам разбирает цвет
   (прозрачность, градиенты) — oklch он не понимает. У светлой темы свои:
   пастель, подобранная под тёмный фон, на белом не читается.

   Шрифты (@font-face) — в dashboard.css: пути fonts/… относительные, и
   автономная сборка встраивает их оттуда (inline_fonts в билдере). */

/* ── Цвета: тёмная тема ─────────────────────────────────────────────── */
:root{
  --font-sys: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-body: 'Inter',var(--font-sys);
  --font-head: 'Manrope',var(--font-sys);
  --font-mono: ui-monospace,Consolas,monospace;   /* hex цвета, имена токенов */
  /* --bg связан с BG_LUMINANCE в app/accent.py: поменялся фон — поменять и там */
  --bg: oklch(0.1450 0 0);
  --fg: oklch(0.9850 0 0);
  --card: oklch(0.2050 0 0);
  --card-fg: oklch(0.9850 0 0);
  --popover: oklch(0.2690 0 0);
  --accent: oklch(0.8675 0.1805 161.4219);
  --accent-fg: oklch(0.1776 0 0);
  /* Акцент ТЕКСТОМ и тонкой линией по фону страницы (ссылки, активные
     чипы, рамки фокуса). В тёмной — сам акцент; в светлой — его тёмный
     вариант: яркая мята на белом не читается. Заливки (кнопки) и толстые
     полосы остаются на --accent — яркими, с тёмной надписью. */
  --accent-text: var(--accent);
  --secondary: oklch(0.9357 0.0959 168.3850);
  --secondary-fg: oklch(0.1776 0 0);
  --muted: oklch(0.2690 0 0);
  --muted-fg: oklch(0.7080 0 0);
  --border: oklch(0.2750 0 0);
  --input: oklch(0.3250 0 0);
  --destructive: oklch(0.7040 0.1910 22.2160);
  --destructive-fg: var(--bg);   /* надпись на заливке --destructive */
  --radius: 0.625rem;
  --shadow: 0 1px 3px 0px rgba(0,0,0,.30), 0 1px 2px -1px rgba(0,0,0,.30);
  /* лёгкая подсветка поверх фона — «чуть светлее» в тёмной, «чуть темнее» в светлой */
  --hover: rgba(255,255,255,.08);
  --hover-strong: rgba(255,255,255,.18);
  /* статусы (панель проектов, контент-план) */
  --ok: #4ade80;
  --warn: #E8C25C;
  --info: #7EA6F0;
  /* графики: подписи осей, сетка, подсказка */
  --c-axis: #b0b0b0;
  --c-grid: #3f3f3f;
  --c-tip-bg: #27272a;
  --c-tip-fg: #f4f4f5;
  --c-tip-muted: #8a8a8a;
  /* цвета метрик — одни и те же в графиках и полосках */
  --c-mint: #6EE7B7;
  --c-rose: #FCA5A5;
  --c-sky: #7DD3FC;
  --c-violet: #C4B5FD;
  --c-amber: #FCD34D;
  --c-pink: #F9A8D4;
  --c-green: #86EFAC;
  --c-blue: #93C5FD;
  --c-orange: #FDBA74;
  --c-indigo: #A5B4FC;
  --c-yellow: #facc15;
  --c-purple: #a78bfa;
  --c-lime: #4ade80;
  --c-cyan: #38bdf8;
  --c-bar: #7c5cff;
  color-scheme: dark;              /* поля дат, плееры, полосы прокрутки — тёмные */
}

/* ── Цвета: светлая тема ────────────────────────────────────────────────
   Кнопки и активные пункты — тот же яркий акцент с тёмной
   надписью, что в тёмной теме: затемнённая заливка с белым текстом
   выглядела грязной (29.09.2026). Темнеет только --accent-text — акцент
   текстом и линией по белому. У своего цвета его тёмный вариант считает
   сервер (app/accent.py). --secondary не переопределяется: светлая
   пастель годится и на белом, а своя пастель своего цвета иначе
   перебивалась бы мятной. Тень мягче: на светлом тот же чёрный рисовал
   бы грязь. */
:root[data-theme="light"]{
  --bg: oklch(0.9850 0 0);
  --fg: oklch(0.2050 0 0);
  --card: oklch(1 0 0);
  --card-fg: oklch(0.2050 0 0);
  --popover: oklch(0.9700 0 0);
  --accent-text: oklch(0.5300 0.1300 162);
  --secondary-fg: oklch(0.2050 0 0);
  --muted: oklch(0.9550 0 0);
  --muted-fg: oklch(0.4500 0 0);
  --border: oklch(0.9000 0 0);
  --input: oklch(0.8300 0 0);
  --destructive: oklch(0.5500 0.2000 25);
  --shadow: 0 1px 3px 0 rgba(0,0,0,.09), 0 1px 2px -1px rgba(0,0,0,.07);
  --hover: rgba(0,0,0,.05);
  --hover-strong: rgba(0,0,0,.14);
  --ok: #15803d;
  --warn: #a16207;
  --info: #2563eb;
  --c-axis: #6b6b6b;
  --c-grid: #e4e4e7;
  --c-tip-bg: #ffffff;
  --c-tip-fg: #18181b;
  --c-tip-muted: #71717a;
  --c-mint: #059669;
  --c-rose: #dc2626;
  --c-sky: #0284c7;
  --c-violet: #7c3aed;
  --c-amber: #d97706;
  --c-pink: #db2777;
  --c-green: #16a34a;
  --c-blue: #2563eb;
  --c-orange: #ea580c;
  --c-indigo: #4f46e5;
  --c-yellow: #ca8a04;
  --c-purple: #9333ea;
  --c-lime: #15803d;
  --c-cyan: #0891b2;
  --c-bar: #6d4aff;
  color-scheme: light;
}

/* ── Шкалы (утверждены 20.10.2026, этап 2 плана дизайн-системы) ─────────
   Одинаковы в обеих темах. На 20.10.2026 ещё НЕ применены: CSS страниц
   переходит на них по этапам 6–11. Новое правило пиши сразу на них. */
:root{
  /* Размер шрифта. Имя — роль, число в комментарии — px. */
  --text-xs: 11px;      /* метки капсом, бейджи, время, подписи */
  --text-sm: 12px;      /* кнопки, чипы, таблицы, пункты меню */
  --text-base: 13px;    /* основной текст интерфейса, поля; body */
  --text-md: 15px;      /* подзаголовки разделов, бренд */
  --text-lg: 18px;      /* заголовок страницы на телефоне */
  --text-xl: 20px;      /* заголовок страницы на ПК */
  --text-2xl: 24px;     /* цифра KPI */
  --text-3xl: 28px;     /* крупная цифра KPI */
  --text-touch: 16px;   /* поля ввода на телефоне (≤900px): мельче — iPhone приближает страницу */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-none: 1;        /* значки, цифры */
  --leading-tight: 1.3;     /* заголовки, бейджи */
  --leading-normal: 1.5;    /* текст */
  --leading-relaxed: 1.6;   /* длинные пояснения */

  --tracking-caps: .08em;   /* метки капсом */
  --tracking-tight: -.01em; /* заголовки */

  /* Отступы (padding, margin, gap). Имя = px: --space-12 — это 12px. */
  --space-px: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  /* Радиусы. --radius (10px, карточки) — выше, среди цветов: на него уже
     опираются calc() в dashboard.css. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;        /* окна, дни календаря */
  --radius-full: 999px;     /* пилюли, чипы, бейджи */
  --radius-circle: 50%;     /* аватарки, точки, кнопки ▶ */

  /* Высоты элементов управления */
  --chip-h: 28px;
  --control-sm: 28px;       /* кнопки и поля sm */
  --control-md: 32px;       /* кнопки и поля md — по умолчанию */
  --control-lg: 36px;       /* только контент-план */
  --control-check: 16px;    /* галочка и кружок выбора */

  /* Иконки (ds/icons.svg, класс .icon) */
  --icon-xs: 12px;          /* в строке мелкого текста: «▶ видео», плашка на фото */
  --icon-sm: 14px;          /* в чипе и сегменте, стрелка раскрытия, крестик чипа */
  --icon-md: 16px;          /* в маленькой кнопке: плеер голосовых, крестик плеера */
  --icon-base: 18px;        /* по умолчанию: пункт меню, кнопка-значок */
  --icon-lg: 20px;          /* знак проекта в сайдбаре */
  --icon-xl: 24px;          /* просмотрщик фото: крестик и стрелки */

  /* Ширина окон <dialog> (на телефоне — не шире экрана минус поля 16) */
  --dialog-sm: 340px;       /* подтверждение: вопрос и две кнопки */
  --dialog-md: 640px;       /* окно с формой (контент-план) */

  /* Тени: --shadow (карточки) — среди цветов, у светлой темы своя.
     Большая — окна, выдвижные панели, просмотрщик. */
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  --ring: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--fg);   /* выбранная точка, сегодня */

  /* Поверх фото и видео — одинаково в обеих темах: под плашкой картинка, а
     не фон страницы. */
  --on-media: #fff;
  --media-bg: #000;
  --media-badge: rgba(0,0,0,.75);
  --media-badge-border: rgba(255,255,255,.18);
  --scrim: rgba(0,0,0,.55);         /* затемнение под окном и меню */
  --scrim-strong: rgba(0,0,0,.88);  /* просмотрщик фото */

  /* Фирменные цвета платформ — метки рассылок и каналов ChatPlace, одинаково
     в обеих темах: по ним строку узнают с первого взгляда. */
  --brand-tg: #2aabee;              /* Telegram */
  --brand-ig: #e1306c;              /* Instagram */

  /* Длительности анимаций */
  --dur-fast: 140ms;        /* наведение, цвет */
  --dur-base: 200ms;        /* появление, сдвиг */
  --dur-slow: 260ms;        /* аккордеон сайдбара */
  --dur-spin: 800ms;        /* оборот значка загрузки */

  /* Слои */
  --z-sticky: 20;
  --z-header: 30;           /* шапка телефона с кнопкой меню — над липкими рядами */
  --z-overlay: 50;          /* подложка, кнопка меню */
  --z-drawer: 60;           /* сайдбар на телефоне, панель Директа */
  --z-modal: 70;
  --z-lightbox: 1000;
  --z-toast: 1100;          /* тосты — поверх окон и просмотрщика */
  --z-tooltip: 9999;

  /* Точки перелома — переменные в @media не работают, поэтому числом:
     600 (узкий телефон) · 900 (главный: мобильная версия, max-width:900px /
     min-width:901px) · 1200 (широкий экран). Других не заводить. */
}