/* =========================================================================
   Пижон — дизайн-токены. Единственный источник цветов, шрифтов, размеров.
   Компоненты используют только переменные отсюда.

   Образ: «ателье». Тёплая бумага и чернила вместо серых панелей; лента — один лист бумаги
   посередине, без карточек; заголовки — антиквой Prata, интерфейс — гротеском Onest;
   единственный акцент — изумруд (ссылки, выбранное, фокус), как булавка на галстуке.
   Знак выбора — маленький ромб («запонка»), а не залитый фон.
   Темы: светлая «Бумага», тёмная «Вечер», OLED «Ночь» (чистый чёрный).
   Контраст текста: --text/--muted к --surface ≥ 4.5:1 во всех темах; --accent к --surface ≥ 4.5:1.
   ========================================================================= */
:root {
  color-scheme: light;
  /* Поверхности: бумага (фон страницы) и лист (лента, окна, поля) */
  --bg: #f4f0e8;
  --surface: #fffdf8;
  --surface-2: #f6f2ea;
  --surface-3: #ece6db;
  --line: #e7e0d4;
  --line-strong: #d3c9b9;
  --overlay: rgba(28, 24, 18, .38);
  --glass: rgba(255, 253, 248, .86);
  /* Чернила */
  --text: #1c1915;
  --text-2: #4b453c;
  --muted: #6f675b;
  --inverse: #fffdf8;
  /* Акцент — изумруд; семантика — приглушённые природные тона */
  --accent: #17684f;
  --accent-strong: #0f5440;
  --accent-soft: rgba(23, 104, 79, .09);
  --like: #b3243f;
  --like-soft: rgba(179, 36, 63, .08);
  --repost: #17684f;
  --repost-soft: rgba(23, 104, 79, .09);
  --good: #17684f;
  --warning: #94600b;
  --danger: #b3243f;
  --danger-soft: rgba(179, 36, 63, .08);
  --info: #1f5f9e;
  --btn-bg: #1c1915;
  --btn-fg: #fffdf8;
  /* Графики (validated categorical slots 1–2) */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --grid: #ece6db;

  /* Типографика */
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Prata", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --lh: 1.5;
  --track-caps: .09em; /* разрядка подписей капителью */

  /* Отступы (шаг 4px) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  /* Радиусы: мягкие, но не «пузыри» */
  --r-sm: 7px; --r-md: 11px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;
  /* Тени — только у всплывающих слоёв; тёплые, без синевы */
  --shadow-pop: 0 18px 44px -18px rgba(40, 30, 16, .3), 0 3px 10px -4px rgba(40, 30, 16, .12), 0 0 0 1px rgba(40, 30, 16, .06);
  /* Размеры элементов управления — общие для всего сайта.
     Высота: поля ввода, поиск, списки выбора и обычные кнопки — одной высоты, компактные — своей. */
  --control-h: 42px;       /* поле, поиск, список выбора, кнопка */
  --control-h-sm: 32px;    /* компактная кнопка, компактный список выбора, «чипы» */
  --control-h-lg: 50px;    /* крупная кнопка (вход, «Написать») */
  /* Ширина: у полей и панелей всего несколько стандартных значений */
  --field-w: 280px;        /* поле поиска/фильтра в строке инструментов */
  --field-w-sm: 168px;     /* короткое поле, список выбора в строке */
  --field-w-xs: 96px;      /* поле на несколько символов (эмодзи, число) */
  --side-w: 300px;         /* боковая колонка: правая колонка, разделы настроек, список чатов и обращений */
  --panel-w-sm: 420px;     /* узкая панель: вход и регистрация */
  --panel-w: 520px;        /* окно (диалог) */
  --panel-w-wide: 680px;   /* широкое окно: публикация, редактирование */
  --content-w: 760px;      /* колонка содержимого настроек, поддержки, статистики */
  --shell-wide-w: 1400px;  /* предел ширины страниц без правой колонки (настройки, сообщения, админка) */
  /* Всплывающие панели (меню, панели, подсказки) — общие для всех */
  --pop-w: 248px;         /* ширина меню */
  --pop-w-lg: 336px;      /* ширина панели (эмодзи, реакции, цвет и шрифт) */
  --pop-pad: 6px;         /* внутренний отступ */
  --pop-r: var(--r-lg);   /* скругление */
  --pop-item-h: 40px;     /* высота пункта */
  --tip-r: var(--r-md);   /* подсказки */
  /* Движение: короткое и мягкое; отключается при prefers-reduced-motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .14s;
  --t: .22s;
  --t-slow: .36s;
  /* Сетка */
  --nav-w: 236px;
  --rail-w: 72px;
  --main-w: 640px;
  --aside-w: var(--side-w);
  --head-h: 64px;
  --cover-aspect: 3 / 1; /* обложка профиля и сообщества — везде одна пропорция, как при кадрировании */
  --tabbar-h: 60px;
  --z-nav: 40; --z-modal: 80; --z-pop: 90; --z-toast: 100; /* меню и подсказки — поверх модальных окон (меню в карточке пользователя) */
}
/* Адаптивность размеров: боковые колонки уже на планшете; поля в строках — во всю ширину на телефоне */
@media (max-width: 1199px) { :root { --side-w: 264px; } }
@media (max-width: 959px) { :root { --side-w: 240px; } }
@media (max-width: 759px) { :root { --field-w: 100%; --field-w-sm: 100%; --side-w: 100%; } }

/* ---- «Вечер»: тёплый тёмный (системный, если тема не выбрана, и выбранный) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="oled"]) {
    color-scheme: dark;
    --bg: #12100e; --surface: #1a1714; --surface-2: #221e1a; --surface-3: #2d2823;
    --line: #2c2722; --line-strong: #3d362f; --overlay: rgba(0, 0, 0, .6); --glass: rgba(26, 23, 20, .84);
    --text: #f1ece3; --text-2: #cdc5b8; --muted: #a0978a; --inverse: #12100e;
    --accent: #6cc7a3; --accent-strong: #8fdcbb; --accent-soft: rgba(108, 199, 163, .12);
    --like: #ff7a8e; --like-soft: rgba(255, 122, 142, .12); --repost: #6cc7a3; --repost-soft: rgba(108, 199, 163, .12);
    --good: #6cc7a3; --warning: #e7b85b; --danger: #ff7a8e; --danger-soft: rgba(255, 122, 142, .11); --info: #7db6f0;
    --btn-bg: #f1ece3; --btn-fg: #12100e;
    --series-1: #3987e5; --series-2: #d95926; --grid: #2c2722;
    --shadow-pop: 0 20px 48px -16px rgba(0, 0, 0, .75), 0 2px 8px -2px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 240, 220, .07);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12100e; --surface: #1a1714; --surface-2: #221e1a; --surface-3: #2d2823;
  --line: #2c2722; --line-strong: #3d362f; --overlay: rgba(0, 0, 0, .6); --glass: rgba(26, 23, 20, .84);
  --text: #f1ece3; --text-2: #cdc5b8; --muted: #a0978a; --inverse: #12100e;
  --accent: #6cc7a3; --accent-strong: #8fdcbb; --accent-soft: rgba(108, 199, 163, .12);
  --like: #ff7a8e; --like-soft: rgba(255, 122, 142, .12); --repost: #6cc7a3; --repost-soft: rgba(108, 199, 163, .12);
  --good: #6cc7a3; --warning: #e7b85b; --danger: #ff7a8e; --danger-soft: rgba(255, 122, 142, .11); --info: #7db6f0;
  --btn-bg: #f1ece3; --btn-fg: #12100e;
  --series-1: #3987e5; --series-2: #d95926; --grid: #2c2722;
  --shadow-pop: 0 20px 48px -16px rgba(0, 0, 0, .75), 0 2px 8px -2px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 240, 220, .07);
}

/* ---- «Ночь» (OLED): фон и лист — чистый чёрный, границы — тонкие тёплые линии ---- */
:root[data-theme="oled"] {
  color-scheme: dark;
  --bg: #000000; --surface: #000000; --surface-2: #0f0d0b; --surface-3: #1a1714;
  --line: #221e1a; --line-strong: #332d27; --overlay: rgba(0, 0, 0, .8); --glass: rgba(0, 0, 0, .8);
  --text: #f4efe6; --text-2: #cbc3b6; --muted: #958c80; --inverse: #000000;
  --accent: #6cc7a3; --accent-strong: #8fdcbb; --accent-soft: rgba(108, 199, 163, .13);
  --like: #ff7a8e; --like-soft: rgba(255, 122, 142, .13); --repost: #6cc7a3; --repost-soft: rgba(108, 199, 163, .13);
  --good: #6cc7a3; --warning: #e7b85b; --danger: #ff7a8e; --danger-soft: rgba(255, 122, 142, .12); --info: #7db6f0;
  --btn-bg: #f4efe6; --btn-fg: #000000;
  --series-1: #3987e5; --series-2: #d95926; --grid: #221e1a;
  --shadow-pop: 0 0 0 1px #332d27, 0 20px 48px -16px rgba(0, 0, 0, .9);
}