/* PostPilot — дизайн-токены. Единственный источник значений интерфейса.
   Часть D (docs/specs/2026-10-02-redesign-d-system.md), бренд как у лендинга `landing/`.

   Два уровня:
     1. базовые  (--gray-*, --night-*, --indigo-*, ...) — палитра; экраны их НЕ используют;
     2. смысловые (--bg, --ink-2, --accent, --space-section, --type-title, ...) — только они
        в CSS компонентов и экранов. Stylelint пропускает цвет/размер/отступ только через var(--…).
   Контраст текста ≥ 4,5:1 на всех подложках проверяет tests/tokens-contrast.test.js.
   История прошлых значений и замеров — docs/design/design-system.md. */

/* Порядок слоёв — один раз, здесь (tokens.css подключается первым).
   legacy — CSS экранов, ещё не переведённых на систему; пустеет по ходу шага 6. */
@layer reset, tokens, base, legacy, components, screens, utilities;

@layer tokens {
  /* ═══ 1. Базовые ═══════════════════════════════════════════════════════ */
  :root {
    /* Холодные нейтрали (светлая тема) */
    --gray-0: #ffffff;
    --gray-10: #fafbfc;
    --gray-25: #f7f8fa;
    --gray-50: #f3f4f7;
    --gray-100: #eceef2;
    --gray-150: #e2e5ea;
    --gray-160: #e3e4ea;
    --gray-200: #e6e7ec;
    --gray-300: #c3c7cf;
    --gray-400: #b8bcc6;
    --gray-500: #5f6470;
    --gray-550: #666b76;
    --gray-600: #4a4f5a;
    --gray-800: #1d2028;
    --gray-900: #0d0f14;
    --gray-950: #111111;

    /* Нейтрали тёмной темы (с лёгким индиговым подтоном) */
    --night-0: #07080c;
    --night-50: #0c0e14;
    --night-100: #161b25;
    --night-150: #1f2531;
    --night-200: #29303e;
    --night-400: #5a616c;
    --night-500: #939aa5;
    --night-600: #b0b7c1;
    --night-800: #e6e8ec;
    --night-900: #f7f8fa;

    /* Акцент — один, как на лендинге */
    --indigo-25: #f6f5ff;
    --indigo-50: #ecebff;
    --indigo-100: #e4e2ff;
    --indigo-200: #b9b6ff;
    --indigo-300: #9d98ff;
    --indigo-350: #8d86ff;
    --indigo-400: #b8b4ff;
    --indigo-500: #4338ff;
    --indigo-600: #2f22e0;
    --indigo-950: #0c0a25;

    /* Состояния. Тёмные ступени (600/700) — те же, что --pl-ok/-warn/-danger
       платформы (rail.a1pro.app/tokens/v1/tokens.css): статус в ПостПилоте и
       в кабинете a1pro одного цвета (ТЗ 3.4.2). */
    --green-500: #1b8a4d;
    --green-600: #116b32;
    --green-50: #dff5e7;
    --green-300: #4ade80;
    --amber-700: #984c00;
    --amber-50: #fdedd7;
    --amber-300: #fbbf24;
    --red-600: #bb2525;
    --red-50: #fbe2e2;
    --red-300: #f87171;

    /* Площадки */
    --brand-tg: #2aabee;
    --brand-vk: #0077ff;
    --brand-zen: #f37322;
    --brand-max: #ff414d;
    --brand-tenchat: #6442ff;
    --brand-vc: #fdd835;
    --brand-vc-ink: #3a2e00;
    --brand-pin: #e60023;
    /* Лендинг: насыщенный VC и чёрный «сайта» чуть отличаются от приложения; мягкие подложки площадок */
    --brand-vc-deep: #e8c200;
    --brand-site: #0b0d10;
    --brand-tg-soft: #e3f4fd;
    --brand-vk-soft: #e1eeff;
    --brand-zen-soft: #feeadb;
    --brand-max-soft: #ffe4e6;
    --brand-tenchat-soft: #ece7ff;
    --brand-vc-soft: #fff6cc;
    --brand-pin-soft: #fde3e6;

    /* Персиковая плашка значка проекта (мокап приложения на лендинге) */
    --peach-100: #f3d9c6;
    --peach-700: #8f5a44;

    /* Шаг сетки — 8, половинка 4 */
    --u-1: 4px;
    --u-2: 8px;
    --u-3: 12px;
    --u-4: 16px;
    --u-5: 24px;
    --u-6: 32px;
    --u-7: 40px;
    --u-8: 48px;
    --u-9: 64px;
    --u-10: 80px;
    --u-11: 96px;
    --u-12: 128px;
    --u: var(--u-2);
  }

  /* ═══ 2. Смысловые: размеры, шрифты, формы (общие для тем) ═══════════ */
  :root {
    /* Шрифты */
    --font-sans: 'Golos Text', 'Golos Text Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Literata', Georgia, 'Times New Roman', serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    /* Роли текста — других нет. Применяются классами .t-* (base.css) или
       свойством font: var(--type-…). Межбуквенный — отдельной переменной. */
    --type-display: 600 48px/52px var(--font-display);
    --type-display-ls: -0.02em;
    --type-number: 600 64px/1 var(--font-display);
    --type-number-ls: -0.03em;
    /* Смелая шкала (2026-10-05, язык лендинга): приветствие главной, огромная
       цифра в плитке, заголовок плитки, крупная строка в тёмной плитке. */
    --type-hero: 600 64px/1.02 var(--font-display);
    --type-hero-ls: -0.03em;
    --type-number-xl: 600 128px/0.9 var(--font-display);
    --type-number-xl-ls: -0.04em;
    --type-tile-title: 600 28px/1.1 var(--font-display);
    --type-tile-lead: 600 40px/1.1 var(--font-display);
    --type-title: 600 20px/28px var(--font-sans);
    --type-subtitle: 600 16px/24px var(--font-sans);
    --type-body: 400 15px/24px var(--font-sans);
    --type-body-strong: 600 15px/24px var(--font-sans);
    --type-small: 400 13px/20px var(--font-sans);
    --type-small-strong: 600 13px/20px var(--font-sans);
    --type-caption: 400 12px/16px var(--font-sans);
    --type-caption-strong: 600 12px/16px var(--font-sans);
    --type-eyebrow: 600 12px/16px var(--font-sans);
    --type-eyebrow-ls: 0.06em;
    --type-mono: 400 13px/20px var(--font-mono);

    /* Отступы по ролям (телефон — ниже, в @media) */
    --space-page: var(--u-6);       /* поля страницы */
    --space-section: var(--u-8);    /* между секциями */
    --space-card: var(--u-5);       /* внутри карточки */
    --space-grid: var(--u-5);       /* зазор сетки */
    --space-stack: var(--u-4);      /* между элементами внутри секции */
    --space-inline: var(--u-2);     /* между соседними контролами */

    /* Сетка */
    --content-max: 1280px;
    --grid-columns: 12;
    --page-px: var(--space-page);

    /* Каркас */
    --nav-w: 248px;
    --nav-w-collapsed: 72px;
    --topbar-h: 56px;
    --tabbar-h: 64px;

    /* Контролы */
    --control-h: 40px;
    --control-h-sm: 32px;
    --control-h-lg: 48px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-stroke: 1.75;

    /* Скругления: карточка 16, контрол 10, плашка — пилюля */
    --r-card: 16px;
    --r-control: 10px;
    --r-tile: 28px;          /* плитка-бенто (язык лендинга) */
    --space-tile: var(--u-6);
    --r-pill: 999px;
    --r-xs: 6px;

    /* Движение */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --dur-fast: 120ms;
    --dur: 200ms;

    /* ── Переходные имена (старые экраны, слой legacy). Не использовать в новом
       коде; удаляются, когда legacy опустеет (шаг 6). ── */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 32px;
    --text-3xl: 40px;
    --text-4xl: 56px;
    --text-5xl: 72px;
    --page-title-size: 40px;
    --page-title-lh: 1.2;
    --page-title-ls: -0.02em;
    --font-weight-display: 600;
    --r-sm: var(--r-control);
    --r-md: 12px;
    --r-lg: var(--r-card);
    --r-xl: 24px;
    --r-2xl: 32px;
  }

  @media (max-width: 999px) {
    :root {
      --type-display: 600 34px/40px var(--font-display);
      --type-number: 600 48px/52px var(--font-display);
      --type-hero: 600 40px/44px var(--font-display);
      --type-number-xl: 600 96px/0.9 var(--font-display);
      --type-tile-title: 600 24px/1.15 var(--font-display);
      --type-tile-lead: 600 28px/1.15 var(--font-display);
      --r-tile: 24px;
      --space-tile: var(--u-5);
      --space-page: var(--u-4);
      --space-section: var(--u-6);
      --space-card: var(--u-4);
      --space-grid: var(--u-4);
      --page-title-size: 28px;
    }
  }

  /* ═══ 2. Смысловые: цвет, светлая тема ═════════════════════════════════ */
  :root,
  [data-theme="light"] {
    color-scheme: light;

    --bg: var(--gray-0);      /* белый фон, как у лендинга (2026-10-05); плитки — заливкой */
    --bg-2: var(--gray-0);
    --surface: var(--gray-0);
    --surface-2: var(--gray-100);
    --surface-3: var(--gray-150);
    --overlay: rgba(13, 15, 20, 0.06);
    --scrim: rgba(10, 14, 22, 0.40);

    --ink: var(--gray-900);
    --ink-1: var(--gray-800);
    --ink-2: var(--gray-600);
    --ink-3: var(--gray-500);
    --ink-4: var(--gray-300);
    --ink-5: var(--gray-150);

    /* Границы — четыре роли: внутри блока / край контейнера / край контрола / ховер */
    --line-soft: rgba(13, 15, 20, 0.10);
    --line-card: rgba(13, 15, 20, 0.16);
    --line: rgba(13, 15, 20, 0.46);      /* ≥ 3:1 — край контрола (WCAG 1.4.11) */
    --line-strong: rgba(13, 15, 20, 0.72);

    --accent: var(--indigo-500);
    --accent-strong: var(--indigo-600);
    --accent-soft: var(--indigo-50);
    --accent-ink: var(--gray-0);
    --accent-glow: rgba(67, 56, 255, 0.18);
    /* Кольцо фокуса поля (как --pl-accent-ring платформы): заметнее, чем --accent-soft */
    --accent-ring: rgba(67, 56, 255, 0.35);
    --focus: var(--accent);

    /* Главная кнопка — чёрная (решение 3 спеки) */
    --primary: var(--gray-900);
    --primary-hover: var(--gray-800);
    --primary-ink: var(--gray-0);

    /* «Создать пост» — фирменное действие, заливка акцентом (решение 2026-10-05) */
    --create: var(--indigo-500);
    --create-hover: var(--indigo-600);
    --create-ink: var(--gray-0);

    /* Плитки-бенто: подложка / текст / приглушённый текст */
    --tile-muted-bg: var(--gray-50);
    --tile-ink-bg: var(--gray-900);
    --tile-ink-fg: var(--gray-0);
    --tile-ink-fg-2: var(--gray-300);
    --tile-accent-bg: var(--indigo-500);
    --tile-accent-fg: var(--gray-0);
    --tile-accent-fg-2: var(--indigo-50);
    --tile-lavender-bg: var(--indigo-50);
    --tile-peach-bg: var(--brand-zen-soft);
    --tile-mint-bg: var(--green-50);

    --ok: var(--green-600);
    --ok-soft: var(--green-50);
    --warn: var(--amber-700);
    --warn-soft: var(--amber-50);
    --danger: var(--red-600);
    --danger-soft: var(--red-50);

    --shadow-xs: 0 1px 0 rgba(13, 15, 20, 0.04);
    --shadow-sm: 0 1px 2px rgba(13, 15, 20, 0.05), 0 1px 1px rgba(13, 15, 20, 0.03);
    --shadow-md: 0 4px 16px -8px rgba(13, 15, 20, 0.12), 0 2px 4px -2px rgba(13, 15, 20, 0.06);
    --shadow-lg: 0 22px 50px -22px rgba(13, 15, 20, 0.22), 0 10px 24px -16px rgba(13, 15, 20, 0.12);
    --shadow-pop: 0 0 0 1px rgba(13, 15, 20, 0.12), 0 24px 60px -22px rgba(13, 15, 20, 0.24);

    /* Кольца: фокус поля, фокус поля с ошибкой, волосяная рамка тега (Badge) */
    --ring-focus: 0 0 0 3px var(--accent-ring);
    --ring-danger: 0 0 0 3px var(--danger-soft);
    --ring-hairline: inset 0 0 0 1px var(--line-card);

    --chevron: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='6'%20viewBox='0%200%2010%206'%3E%3Cpath%20d='M1%201.5%205%205%209%201.5'%20fill='none'%20stroke='%235f6470'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");

    --p-site: var(--gray-900);
    --p-tg: var(--brand-tg);
    --p-vk: var(--brand-vk);
    --p-zen: var(--brand-zen);
    --p-max: var(--brand-max);
    --p-tenchat: var(--brand-tenchat);
    --p-vc: var(--brand-vc);
    --p-vc-ink: var(--brand-vc-ink);
  }

  /* ═══ 2. Смысловые: цвет, тёмная тема ══════════════════════════════════ */
  [data-theme="dark"] {
    color-scheme: dark;

    --bg: var(--night-0);
    --bg-2: var(--night-50);
    --surface: var(--night-100);
    --surface-2: var(--night-150);
    --surface-3: var(--night-200);
    --overlay: rgba(255, 255, 255, 0.08);
    --scrim: rgba(0, 0, 0, 0.60);

    --ink: var(--night-900);
    --ink-1: var(--night-800);
    --ink-2: var(--night-600);
    --ink-3: var(--night-500);
    --ink-4: var(--night-400);
    --ink-5: var(--night-200);

    --line-soft: rgba(255, 255, 255, 0.10);
    --line-card: rgba(255, 255, 255, 0.14);
    --line: rgba(255, 255, 255, 0.36);
    --line-strong: rgba(255, 255, 255, 0.54);

    --accent: var(--indigo-300);
    --accent-strong: var(--indigo-400);
    --accent-soft: rgba(157, 152, 255, 0.14);
    --accent-ink: var(--indigo-950);
    --accent-glow: rgba(157, 152, 255, 0.28);
    --accent-ring: rgba(157, 152, 255, 0.45);

    /* В тёмной теме главная кнопка — светлая: контраст с фоном тот же */
    --primary: var(--night-900);
    --primary-hover: var(--night-800);
    --primary-ink: var(--night-0);

    --create: var(--indigo-500);
    --create-hover: var(--indigo-600);
    --create-ink: var(--gray-0);

    --tile-muted-bg: var(--night-100);
    --tile-ink-bg: var(--night-200);
    --tile-ink-fg: var(--night-900);
    --tile-ink-fg-2: var(--night-600);
    --tile-accent-bg: var(--indigo-500);
    --tile-accent-fg: var(--gray-0);
    --tile-accent-fg-2: var(--indigo-50);
    --tile-lavender-bg: color-mix(in srgb, var(--indigo-500) 22%, var(--night-100));
    --tile-peach-bg: color-mix(in srgb, var(--brand-zen) 18%, var(--night-100));
    --tile-mint-bg: color-mix(in srgb, var(--green-300) 14%, var(--night-100));

    --ok: var(--green-300);
    --ok-soft: rgba(74, 222, 128, 0.14);
    --warn: var(--amber-300);
    --warn-soft: rgba(251, 191, 36, 0.14);
    --danger: var(--red-300);
    --danger-soft: rgba(248, 113, 113, 0.14);

    --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 18px -8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 24px 60px -22px rgba(0, 0, 0, 0.7);
    --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 24px 60px -22px rgba(0, 0, 0, 0.8);

    /* Кольца: фокус поля, фокус поля с ошибкой, волосяная рамка тега (Badge) */
    --ring-focus: 0 0 0 3px var(--accent-ring);
    --ring-danger: 0 0 0 3px var(--danger-soft);
    --ring-hairline: inset 0 0 0 1px var(--line-card);

    --chevron: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='6'%20viewBox='0%200%2010%206'%3E%3Cpath%20d='M1%201.5%205%205%209%201.5'%20fill='none'%20stroke='%23939aa5'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");

    --p-site: var(--night-900);
  }
}