/* le-os-admin-design · tokens.css
   Источник правды по палитре, шрифту и форме. Не хардкодь цвет в разметке —
   только var(--*). Язык: тёплый stone, IBM Plex Sans телом + IBM Plex Mono
   акцентом, мягкие скругления, деликатные тени, цветные пилюли-статусы.

   Дизайн-система 20.09.2026 (макет утверждён владельцем): действия и
   статусы переехали на палитру направлений — чернила действия коралл
   (--ink), акцент синий (--accent), статусы производные (мох из шалфея,
   коралл и кирпич из коралла); сайдбар — барвинок (--sb-*). Бумага и
   текст остались stone. */

/* ── IBM Plex Sans (локально, офлайн) — тело интерфейса ── */
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 300; font-style: normal; font-display: swap;
  src: url("fonts/IBMPlexSans-Light.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/IBMPlexSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/IBMPlexSans-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/IBMPlexSans-SemiBold.ttf") format("truetype");
}

/* ── IBM Plex Mono (локально, офлайн) — акцент: бренд, часы, код, моно-значения ── */
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/IBMPlexMono-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/IBMPlexMono-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/IBMPlexMono-Bold.ttf") format("truetype");
}

:root {
  /* ── Поверхности (тёплый stone) ─────────────────────────────────── */
  --paper:        #ECEAE5;   /* десктоп / сайдбар */
  --paper-raised: #FAFAF8;   /* рабочая панель / поля ввода */
  --paper-card:   #FFFFFF;   /* карточки / таблицы / топбар */
  --paper-mute:   #F5F3EF;   /* вторичная заливка / hover-чип */
  --row-hover:    #FAFAF8;   /* hover строки таблицы */

  /* границы */
  --border:        #ECEAE5;  /* мягкий контур карточки */
  --border-strong: #E0DDD8;  /* контролы / делители форм */
  --border-faint:  #F0EDEA;  /* шапка таблицы */
  --border-row:    #F8F6F3;  /* строки таблицы */

  /* ── Текст ──────────────────────────────────────────────────────── */
  --fg:        #1C1917;   /* основной */
  --fg-soft:   #57534E;   /* вторичный */
  --fg-muted:  #78716C;   /* приглушённый (кнопки-призраки, моно-значения) */
  --fg-label:  #9C9589;   /* метки разделов / шапки таблиц */
  --fg-faint:  #C7C2BA;   /* самый бледный (часы, подписи) */
  --fg-on-ink: #FAFAF8;   /* текст на тёмном (primary-кнопка, бренд, тосты) */

  /* ── Чернила действия и акцент (дизайн-система 20.09.2026) ──────────
     --ink — коралл: primary-кнопка, бренд, выбранный сегмент, тег «рукой»,
     активный пункт меню, выделение текста. Чуть глубже коралла направлений,
     чтобы белый текст на кнопке читался. --accent — синий: ссылки, фокус,
     «догадка Клерка», info. Раньше: чёрный и индиго. */
  --ink:        #DE4C2B;  --ink-hover: #C9401F;  --ink-soft: #FDEEE9;
  --accent:     #44599E;  --accent-bg: #ECEFF6;  --accent-line: #C4CDE6;

  /* ── Статусы — производные от палитры направлений ───────────────────
     мох из шалфея, коралл и кирпич из коралла; info = акцент. */
  --ok:       #5B7A3B;  --ok-bg:   #F3F5EE;  --ok-dot:   #8FA86A;  --ok-border:  #D9E0C8;
  --warn:     #C24A2B;  --warn-bg: #FDEEE9;  --warn-dot: #EE6040;  --warn-border: #F7C9BB;
  --err:      #A32912;  --err-bg:  #FBE7E2;  --err-dot:  #D0361B;  --err-border: #F0B9AB;
  --info:     var(--accent);  --info-bg: var(--accent-bg);
  --idle:     #9C9589;  --idle-bg: #F5F3EF;  --idle-dot: #CEC9C1;
  --tag-bg:   #F5F3EF;  --tag-fg:  #78716C;

  /* ── Сайдбар — барвинок (светлый тон из палитры) ───────────────────── */
  --sb-bg: #E6EBF7;  --sb-fg: #4E5A7F;  --sb-fg-strong: #15245A;  --sb-label: #8A95B6;
  --sb-hover: #DBE2F3;  --sb-active: #FFFFFF;  --sb-active-fg: var(--ink);
  --sb-line: #C8D1EA;  --sb-badge-bg: #D3DBF0;  --sb-badge-fg: #44599E;

  /* ── Направления — палитра из шести (срез 1 роадмапа направлений) ──
     В базе лежит ключ цвета, значение — здесь: хекс в базе разъехался бы с
     темой при первой правке токенов. Красит только точку: заливка строки
     делает таблицу нечитаемой. -bg держим для фона чипов срезов 2 и 3. */
  /* Палитра владельца (обзор встреч, 19.09.2026): ключи прежние, чтобы база
     и формы не менялись, значения — его пять цветов плюс графит шестым
     нейтральным. Три живых направления держат три самых сильных цвета:
     indigo — синий, amber — коралл, green — нави. Барвинок и шалфей
     светлые: в графиках у серий всегда подпись и легенда. */
  --d-indigo: #44599E;      /* синий */
  --d-indigo-bg: #ECEFF6;
  --d-green: #15245A;       /* нави */
  --d-green-bg: #E8EAF1;
  --d-amber: #EE6040;       /* коралл */
  --d-amber-bg: #FDEEE9;
  --d-rose: #819ADE;        /* барвинок */
  --d-rose-bg: #EEF1FA;
  --d-teal: #CAD3B7;        /* шалфей */
  --d-teal-bg: #F3F5EE;
  --d-stone: #57534E;       /* графит */
  --d-stone-bg: #F0EEEB;


  /* ── Тип ────────────────────────────────────────────────────────── */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: 36px;
  --fs-h1:      22px;
  --fs-h2:      16px;
  --fs-body:    14px;
  --fs-sm:      13px;
  --fs-xs:      11.5px;
  --fs-label:   10.5px;

  --tracking-label: 0.09em;
  --tracking-caps:  0.14em;

  /* ── Форма ──────────────────────────────────────────────────────── */
  --radius:      7px;    /* кнопки / поля */
  --radius-sm:   6px;    /* мелкие кнопки */
  --radius-lg:   10px;   /* карточки */
  --radius-xl:   12px;   /* карточки обзора */
  --radius-pill: 999px;  /* статус-пилюли */
  --radius-tag:  10px;   /* теги id/@ */
  --hairline: 1px solid var(--border);

  /* ── Тень (деликатно, глубина через тень+границу) ───────────────── */
  --shadow-nav:        0 1px 2px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.04);
  --shadow-card-hover: 0 2px 8px rgba(0,0,0,.05);
  --shadow-panel:      -1px 0 0 rgba(0,0,0,.06);
  --shadow-modal:      0 16px 48px rgba(28,25,23,.18);

  --sidebar-w: 232px;
  --sidebar-rail: 60px;  /* свёрнутый сайдбар — рейка со значками */
  --topbar-h:  52px;

  /* ── Движение ───────────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}