/* Demetra — дизайн-токены.

   Источник истины для цвета, радиусов, теней и типографики. Собран из макета
   редизайна (docs/design/mockup/01-design-system-tokens.js), значения перенесены
   без правок.

   Две независимые оси вместо одной:
     data-scheme  — warm | neutral | black   (фон, текст, поверхности)
     data-palette — aubergine | slate | indigo | moss | clay   (акцент)
   Пятнадцать сочетаний, тёмная тема — переключение атрибута, а не второй файл.

   Внизу файла — слой совместимости: сорок два имени старой системы объявлены
   алиасами на новые. Он нужен, чтобы экраны переезжали по одному: до сих пор не
   переведённая страница берёт те же цвета, что и переведённая, и сайт не
   разъезжается на полпути. Удалить его можно будет, когда ни один шаблон и ни
   один css больше не упоминает старые имена. */

:root {
  /* Слои. До этого шкалы не было вовсе, и каждое всплывающее число
     подбиралось «лишь бы поверх»: 900 у мёртвого правила навбара тянуло за
     собой 1000 у затемнения модалки, 1201 у меню счёта, 9999 у окна
     обновления и 100000 у редактора аннотаций. Пять этажей, чтобы перекрыть
     один. */
  --z-content: 1;
  --z-rail: 40;
  --z-float: 60;      /* всплывающие панели и меню, док выделения */
  --z-overlay: 200;   /* затемнение модалки — значение из макета */
  --z-editor: 300;    /* полноэкранный редактор поверх модалки */
  --z-popover: 350;   /* свой выпадающий список: он открывается и изнутри модалки */
  --z-always: 400;    /* переход к содержимому и полоса загрузки */

  --r1: 10px;
  --r2: 14px;
  --r3: 22px;
  --r4: 28px;
  --r5: 32px;
  --fast: 160ms;
  --norm: 220ms;
  --slow: 300ms;
  --ease: cubic-bezier(.2,.8,.2,1);
  --font: "Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* --- Схемы ---------------------------------------------------------- */

:root, [data-scheme="warm"] {  /* warm — тёплая бумага, по умолчанию */
  --bg: #FAF9F7;
  --surface: #FFFFFF;
  --surface2: #F2F0EC;
  --surface-hover: #EBE8E2;
  --text: #14120F;
  --text2: #6B6761;
  --muted: #9A968E;
  --disabled: #BEBAB2;
  --pos: #12A06E;
  --pos-soft: rgba(18,160,110,.09);
  --neg: #D9484E;
  --neg-soft: rgba(217,72,78,.09);
  --warn: #B7791F;
  --warn-soft: rgba(183,121,31,.10);
  --border: rgba(20,18,15,.06);
  --border-strong: rgba(20,18,15,.11);
  --hairline: rgba(20,18,15,.06);
  --glass-bg: rgba(255,255,255,.74);
  --glass-border: rgba(255,255,255,.72);
  --sh-card: 0 1px 2px rgba(40,34,24,.03), 0 8px 30px rgba(40,34,24,.04);
  --sh-float: 0 12px 40px rgba(40,34,24,.09);
  --sh-modal: 0 24px 80px rgba(40,34,24,.14);
  --ink-btn: #17150F;
  --ink-btn-hover: #2C2921;
  --ink-btn-text: #FFFFFF;
}

[data-scheme="neutral"] {  /* нейтральная — холодный серый */
  --bg: #F6F7F8;
  --surface: #FFFFFF;
  --surface2: #F1F2F4;
  --surface-hover: #EAECEF;
  --text: #111214;
  --text2: #686B70;
  --muted: #94979C;
  --disabled: #B8BBC0;
  --pos: #12A06E;
  --pos-soft: rgba(18,160,110,.09);
  --neg: #D9484E;
  --neg-soft: rgba(217,72,78,.09);
  --warn: #B7791F;
  --warn-soft: rgba(183,121,31,.10);
  --border: rgba(0,0,0,.055);
  --border-strong: rgba(0,0,0,.10);
  --hairline: rgba(0,0,0,.055);
  --glass-bg: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.7);
  --sh-card: 0 1px 2px rgba(16,18,22,.03), 0 8px 30px rgba(16,18,22,.035);
  --sh-float: 0 12px 40px rgba(16,18,22,.09);
  --sh-modal: 0 24px 80px rgba(16,18,22,.14);
  --ink-btn: #151517;
  --ink-btn-hover: #2A2A2E;
  --ink-btn-text: #FFFFFF;
}

[data-scheme="black"] {  /* чёрная — глубокий чёрный */
  --bg: #08090A;
  --surface: #101113;
  --surface2: #17191C;
  --surface-hover: #1F2226;
  --text: #F2F3F4;
  --text2: #9EA1A7;
  --muted: #71747A;
  --disabled: #4E5157;
  --pos: #2FBF8C;
  --pos-soft: rgba(47,191,140,.12);
  --neg: #F0666C;
  --neg-soft: rgba(240,102,108,.12);
  --warn: #D9A33C;
  --warn-soft: rgba(217,163,60,.14);
  --border: rgba(255,255,255,.075);
  --border-strong: rgba(255,255,255,.15);
  --hairline: rgba(255,255,255,.075);
  --glass-bg: rgba(16,17,19,.74);
  --glass-border: rgba(255,255,255,.1);
  --sh-card: 0 1px 2px rgba(0,0,0,.5), 0 8px 30px rgba(0,0,0,.4);
  --sh-float: 0 12px 40px rgba(0,0,0,.45);
  --sh-modal: 0 24px 80px rgba(0,0,0,.55);
  --ink-btn: #F1F2F3;
  --ink-btn-hover: #FFFFFF;
  --ink-btn-text: #111214;
}

/* --- Палитры -------------------------------------------------------- */
/* Светлые схемы берут .light, чёрная — .dark: на тёмном фоне тот же акцент
   читается иначе, поэтому у каждой палитры два набора. */

:root,
[data-palette="aubergine"],
[data-scheme="warm"][data-palette="aubergine"],
[data-scheme="neutral"][data-palette="aubergine"] {  /* Аметист — Приглушённый фиолетовый */
  --accent: #4A3F5C;
  --accent-hover: #3B3249;
  --accent-soft: rgba(74,63,92,.075);
  --accent-line: #6C5E82;
  --accent-rgb: 74,63,92;
}

[data-scheme="black"][data-palette="aubergine"] {
  --accent: #A99BC0;
  --accent-hover: #BCB0CF;
  --accent-soft: rgba(169,155,192,.13);
  --accent-line: #A99BC0;
  --accent-rgb: 169,155,192;
}

[data-palette="slate"],
[data-scheme="warm"][data-palette="slate"],
[data-scheme="neutral"][data-palette="slate"] {  /* Графит — Полностью нейтральная */
  --accent: #3F4650;
  --accent-hover: #31373F;
  --accent-soft: rgba(63,70,80,.075);
  --accent-line: #5A6068;
  --accent-rgb: 63,70,80;
}

[data-scheme="black"][data-palette="slate"] {
  --accent: #A8AEB6;
  --accent-hover: #BCC1C8;
  --accent-soft: rgba(168,174,182,.13);
  --accent-line: #A8AEB6;
  --accent-rgb: 168,174,182;
}

[data-palette="indigo"],
[data-scheme="warm"][data-palette="indigo"],
[data-scheme="neutral"][data-palette="indigo"] {  /* Индиго — Глубокая и собранная */
  --accent: #3C4A6B;
  --accent-hover: #2F3A55;
  --accent-soft: rgba(60,74,107,.075);
  --accent-line: #5B6C90;
  --accent-rgb: 60,74,107;
}

[data-scheme="black"][data-palette="indigo"] {
  --accent: #9BAAC8;
  --accent-hover: #B0BCD5;
  --accent-soft: rgba(155,170,200,.13);
  --accent-line: #9BAAC8;
  --accent-rgb: 155,170,200;
}

[data-palette="moss"],
[data-scheme="warm"][data-palette="moss"],
[data-scheme="neutral"][data-palette="moss"] {  /* Хвоя — Спокойная и тёплая */
  --accent: #3D5347;
  --accent-hover: #2F4237;
  --accent-soft: rgba(61,83,71,.075);
  --accent-line: #516B58;
  --accent-rgb: 61,83,71;
}

[data-scheme="black"][data-palette="moss"] {
  --accent: #9BB6A4;
  --accent-hover: #AFC5B6;
  --accent-soft: rgba(155,182,164,.13);
  --accent-line: #9BB6A4;
  --accent-rgb: 155,182,164;
}

[data-palette="clay"],
[data-scheme="warm"][data-palette="clay"],
[data-scheme="neutral"][data-palette="clay"] {  /* Глина — Землистая и мягкая */
  --accent: #6B4A3C;
  --accent-hover: #563A2F;
  --accent-soft: rgba(107,74,60,.075);
  --accent-line: #8A6353;
  --accent-rgb: 107,74,60;
}

[data-scheme="black"][data-palette="clay"] {
  --accent: #C4A08E;
  --accent-hover: #D2B2A2;
  --accent-soft: rgba(196,160,142,.13);
  --accent-line: #C4A08E;
  --accent-rgb: 196,160,142;
}
/* --- Слой совместимости --------------------------------------------------

   Сорок два имени прежней системы. Пока хоть один шаблон или css их
   использует, они обязаны существовать и указывать на новые токены — иначе
   непереведённая страница останется без цвета.

   Отображение не один-к-одному, потому что словари разной формы:
   у прежней системы был один --primary с четырьмя оттенками, у новой —
   акцент, вынесенный в отдельную ось. Ниже выбраны ближайшие по роли. */

:root {
  /* акцент */
  --primary: var(--accent);
  --primary-hover: var(--accent-hover);
  --primary-light: var(--accent-line);
  --primary-dark: var(--accent-hover);
  --primary-gradient: linear-gradient(135deg, var(--accent), var(--accent-hover));
  --primary-rgb: var(--accent-rgb);
  /* --accent и --accent-hover не переобъявляем: имена совпали с новыми
     токенами, а `--accent-hover: var(--accent-hover)` — самоссылка, которая
     делает свойство невалидным и стирает акцент со всей страницы. */
  --accent-light: var(--accent-line);
  --accent-alt-rgb: var(--accent-rgb);
  --accent-glow: 0 0 0 3px var(--accent-soft);
  --glow-accent: 0 0 0 3px var(--accent-soft);

  /* поверхности */
  --bg-primary: var(--bg);
  --bg-secondary: var(--surface);
  --bg-tertiary: var(--surface2);
  --bg-card: var(--surface);
  --bg-hover: var(--surface-hover);

  /* текст */
  --text-primary: var(--text);
  --text-secondary: var(--text2);
  --text-muted: var(--muted);

  /* границы */
  --border-light: var(--hairline);

  /* состояния */
  --success: var(--pos);
  --success-bg: var(--pos-soft);
  --error: var(--neg);
  --error-bg: var(--neg-soft);
  --warning: var(--warn);
  --warning-bg: var(--warn-soft);

  /* деньги и направление сделки */
  --profit: var(--pos);
  --profit-bg: var(--pos-soft);
  --loss: var(--neg);
  --loss-bg: var(--neg-soft);
  --buy-color: var(--pos);
  --sell-color: var(--neg);

  /* форма */
  --radius-sm: var(--r1);
  --radius-md: var(--r2);
  --radius-lg: var(--r3);
  --shadow-sm: var(--sh-card);
  --shadow-md: var(--sh-float);
  --shadow-lg: var(--sh-modal);
  --font-sans: var(--font);
}