@layer cards, base, layout-base, layout-screens, layout-top, components, state, motion;

/* Zidos · токены облика (R32a). Единственное место, где живут литералы цвета, размеры, шкалы и движение.
   Источник значений: эталон zidos-clio-pick2/assets/style.css (палитра p3, капсула, карточка, вложенное) и R28.
   Порядок подключения: tokens.css -> components.css -> app.css. Компоненты и раскладка читают только эти переменные. */

@font-face {
  font-family: Inter;
  src: url('../fonts/inter/Inter-VF.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrainsmono/JetBrainsMono-VF.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

/* ---- светлая тема (по умолчанию) и цвет действия lime ---- */
:root {
  /* цвета: смысл */
  --canvas: #F5F6FA;          /* фон окна, подложка под всем */
  --frame: #FFFFFF;           /* рабочая область, листы */
  --surface: var(--raised);   /* карточка, строка, поле: тональная поверхность на canvas/frame */
  --raised: #FFFFFF;          /* приподнятая поверхность */
  --panel: #EEF0F6;           /* вторичная подложка: вложенное, тональная капсула, сегмент */
  --ink: #0F1222;             /* основной текст */
  --muted: #5E6478;           /* вторичный текст */
  --faint: #9AA0B4;           /* подсказки, неактивное */
  --action: #A3E635;          /* главное действие (lime) */
  --action-ink: #0B0B0D;      /* текст на действии */
  --own: #E8E7FF;             /* пузырь своего сообщения */
  --own-ink: #1E1B4B;
  --other: #EEF0F6;           /* пузырь чужого сообщения */
  --other-ink: #0F1222;
  --agent-glyph: var(--action);
  --ok: #047857;
  --ok-bg: #ECFDF5;
  --bad: #BE123C;
  --bad-bg: #FFF1F2;
  --warning: #B45309;
  --warning-bg: #FFFBEB;
  --ink-button: var(--ink);       /* активный сегмент, тёмная кнопка */
  --ink-button-text: var(--frame);
  --shadow: 0 12px 32px rgba(15, 18, 34, .08);
  --shadow-sm: 0 5px 20px rgba(15, 18, 34, .05);
  --scrim: rgba(15, 18, 34, .32);
  color-scheme: light;

  /* прежние имена: карточки (cards/*.css) и старая разметка читают их, значения одни */
  --data-ok: var(--ok); --data-ok-bg: var(--ok-bg);
  --data-bad: var(--bad); --data-bad-bg: var(--bad-bg);
  --attention: var(--warning); --attention-bg: var(--warning-bg);
  --z-frame: var(--canvas); --z-side: var(--canvas); --z-paper: var(--frame);
  --z-bubble: var(--other); --z-bubble-own: var(--own);
  --z-card: var(--raised); --z-card-sub: var(--panel); --z-card-sub2: var(--canvas);
  --z-ink: var(--ink); --z-sub: var(--muted); --z-faint: var(--faint); --z-muted: var(--muted);
  --z-selected: var(--panel); --z-pill: var(--action); --z-pill-ink: var(--action-ink); --z-coral: var(--action);
  --z-ok: var(--ok); --z-ok-bg: var(--ok-bg); --z-bad: var(--bad); --z-bad-bg: var(--bad-bg);
  --z-shadow: var(--shadow); --z-shadow-sm: var(--shadow);
  --z-font-ui: Inter, system-ui, sans-serif;
  --z-font-code: 'JetBrains Mono', ui-monospace, monospace;

  /* шкала отступов */
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-32: 32px;

  /* радиусы: капсула, карточка, вложенное, мелкое */
  --radius-pill: 999px; --radius-card: 24px; --radius-inner: 16px; --radius-sm: 12px; --radius-field: 16px;

  /* высоты */
  --h-pill: 44px;       /* капсула */
  --h-icon: 44px;       /* круглая иконка (ширина = высота) */
  --h-seg: 44px;        /* кнопка сегмента: той же высоты, что капсула */
  --h-seg-box: 44px;    /* контейнер сегмента = высота кнопки: все радиусы в ряду равны */
  --h-row: 56px;        /* наименьшая высота строки списка */
  --pad-pill: 18px;     /* поле капсулы слева и справа */
  --pad-seg: 8px;       /* поле кнопки сегмента */
  --pad-card: 20px;     /* внутреннее поле карточки */
  --pad-row: 14px;      /* внутреннее поле строки */
  --icon-row: 40px;     /* кружок в строке списка */
  --pad-bubble: var(--sp-12) var(--sp-16); /* пузырь сообщения */

  /* кегли: 4 уровня заголовков, 3 уровня текста */
  --fs-h1: 30px;  --fw-h1: 550;   /* название экрана */
  --fs-h2: 20px;  --fw-h2: 600;   /* название блока */
  --fs-h3: 16px;  --fw-h3: 600;   /* название карточки, чата */
  --fs-h4: 13px;  --fw-h4: 550;   /* метка группы */
  --fs-body: 14px;                /* основной текст */
  --fs-small: 13px;               /* подписи, кнопки */
  --fs-micro: 11px;               /* мелкие метки */
  --lh-tight: 1.15; --lh-title: 1.3; --lh-body: 1.5;

  /* сегмент: активная кнопка */
  --clio-segment-ink: var(--ink-button); --clio-segment-text: var(--ink-button-text);

  /* оболочка */
  --side: 270px; --rail: 52px; --sidebar-tone: color-mix(in srgb, var(--frame) 68%, var(--canvas));

}
@media (max-width: 760px) { :root { --fs-h1: 28px; } }

/* ---- тёмная тема ---- */
:root[data-theme=dark] {
  --canvas: #0F1222;
  --frame: #171B2E;
  --panel: #242A40;
  --raised: #2D344D;
  --ink: #F5F6FA;
  --muted: #BAC1D5;
  --faint: #8E97B4;
  --action: #BEF264;
  --action-ink: #0B0B0D;
  --own: #34315F;
  --own-ink: #EEEDFF;
  --other: #242A40;
  --other-ink: #F5F6FA;
  --ok: #6EE7B7;
  --ok-bg: #18372F;
  --bad: #FDA4AF;
  --bad-bg: #422333;
  --warning: #FCD34D;
  --warning-bg: #393123;
  --ink-button: var(--canvas);
  --ink-button-text: var(--ink);
  --shadow: 0 12px 32px rgba(0, 0, 0, .25);
  --shadow-sm: 0 5px 20px rgba(0, 0, 0, .25);
  --scrim: rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* ---- цвет действия: lime (по умолчанию), indigo, blue ---- */
:root[data-action=indigo] { --action: #4F46E5; --action-ink: #FFFFFF; }
:root[data-action=blue] { --action: #2563EB; --action-ink: #FFFFFF; }
:root[data-action=lime] { --action: #A3E635; --action-ink: #0B0B0D; }
:root[data-theme=dark][data-action=indigo] { --action: #A5A0FF; --action-ink: #1E1B4B; }
:root[data-theme=dark][data-action=blue] { --action: #93C5FD; --action-ink: #0B0B0D; }
:root[data-theme=dark][data-action=lime] { --action: #BEF264; --action-ink: #0B0B0D; }