/* ============================================================================
   PostPilot — Design Tokens v1.0
   Автопилот Telegram-канала для интернет-магазина
   ----------------------------------------------------------------------------
   Слои:
     1. Шрифты (самохостинг, без CDN)
     2. Примитивы  --p-*   — сырые значения, В КОМПОНЕНТАХ НЕ ИСПОЛЬЗУЮТСЯ
     3. Семантика  --surface-* --text-* --border-* --accent-* и т.д.
     4. Базовый reset и типографические основы
   Правило: компонент имеет право читать только семантические токены.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. ШРИФТЫ */
/* Golos Text — Paratype, лицензия SIL OFL 1.1. Кириллица родная.
   Источник файлов: репозиторий Google Fonts, ofl/golostext (переменная ось wght 400–900).
   Файлы скачаны один раз и лежат рядом: fonts/golos-text-*.woff2 — CDN не используется. */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/golos-text-cyrillic-1nzrg9_.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/golos-text-latin-HCe20zO.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter — Rasmus Andersson, лицензия SIL OFL 1.1. Переменная ось wght 100–900. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-cyrillic-kKAg1t7.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-Gz7AlRl.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Метрически подогнанный фолбэк — убирает скачок вёрстки (CLS) до загрузки Inter. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica'), local('DejaVu Sans');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ------------------------------------------------------------ 2. ПРИМИТИВЫ */
:root {
  /* Нейтраль — сине-графитовая, не «мёртвый серый»: hue ≈ 218, S ≈ 12 %. */
  --p-neutral-000: #FFFFFF;
  --p-neutral-025: #FBFCFD;
  --p-neutral-050: #F6F7F9;
  --p-neutral-100: #EFF1F5;
  --p-neutral-150: #E8EBF0;
  --p-neutral-200: #E2E6EC;
  --p-neutral-300: #CBD2DC;
  --p-neutral-400: #A6AFBE;
  --p-neutral-500: #7F8898;
  --p-neutral-600: #656E7C;
  --p-neutral-700: #4A5464;
  --p-neutral-800: #2B333E;
  --p-neutral-900: #151A21;
  --p-neutral-950: #0E1218;

  /* Акцент — «сигнальный индиго». Один-единственный брендовый цвет. */
  --p-indigo-050: #EEF1FE;
  --p-indigo-100: #DFE5FD;
  --p-indigo-200: #C2CDFB;
  --p-indigo-300: #9DAFF7;
  --p-indigo-400: #748FF0;
  --p-indigo-500: #4A66E4;
  --p-indigo-600: #2E4BD0;
  --p-indigo-700: #2740B0;
  --p-indigo-800: #22368F;
  --p-indigo-900: #1A2A6E;
  --p-indigo-light-300: #8FA6FF;
  --p-indigo-light-200: #A3B6FF;
  --p-indigo-dark-bg:   #161E3A;

  /* Статусные семейства */
  --p-green-050:  #E7F5EF;  --p-green-600: #0F7A54;  --p-green-700: #0B6A49;
  --p-green-light:#4ADFA8;  --p-green-dark-bg: #0F2620;
  --p-amber-050:  #FBF1DF;  --p-amber-600: #9A5B00;  --p-amber-700: #84500A;
  --p-amber-light:#F0B44E;  --p-amber-dark-bg: #2A1F0E;
  --p-red-050:    #FCECEA;  --p-red-600:   #B4241C;  --p-red-700:   #A82019;
  --p-red-light:  #FF8078;  --p-red-dark-bg:   #2C1512;
  --p-teal-050:   #E6F3F7;  --p-teal-600:  #0E6E86;  --p-teal-700:  #0C6076;
  --p-teal-light: #4EC6E6;  --p-teal-dark-bg:  #0C222B;

  /* Тёмная тема — самостоятельная палитра, а не инверсия светлой.
     Строится от глубокого сине-графитового, поверхности расходятся по светлоте
     ступенями 5–7 % — не по прозрачности. */
  --p-dark-canvas:  #0E1218;
  --p-dark-surface: #151A21;
  --p-dark-raised:  #1B212A;
  --p-dark-sunken:  #0A0E13;
  --p-dark-line:    #262D37;
  --p-dark-line-2:  #303845;
  --p-dark-control: #646E7D;
  --p-dark-text:    #E9ECF2;
  --p-dark-text-2:  #A9B3C1;
  --p-dark-text-3:  #7F8A9A;
  --p-dark-badge:   #212832;
  --p-dark-badge-t: #B7C0CD;
  --p-indigo-dark-solid: #3A57DA;
}

/* --------------------------------------------- 3. СЕМАНТИКА — СВЕТЛАЯ ТЕМА */
:root {
  color-scheme: light;

  /* Поверхности: canvas → surface → raised → overlay. Глубина — ступенями
     светлоты и рамкой 1 px, а не тенью на каждом элементе. */
  --surface-canvas:   var(--p-neutral-050);
  --surface-default:  var(--p-neutral-000);
  --surface-raised:   var(--p-neutral-000);
  --surface-sunken:   var(--p-neutral-100);
  --surface-inset:    var(--p-neutral-025);
  --surface-overlay:  var(--p-neutral-000);
  --surface-hover:    var(--p-neutral-050);
  --surface-active:   var(--p-neutral-100);
  --surface-selected: var(--p-indigo-050);
  --surface-disabled: var(--p-neutral-100);
  --scrim:            rgba(14, 18, 24, .48);

  /* Текст */
  --text-primary:   var(--p-neutral-900);
  --text-secondary: var(--p-neutral-700);
  --text-muted:     var(--p-neutral-600);
  --text-disabled:  var(--p-neutral-400);
  --text-inverse:   var(--p-neutral-000);
  --text-accent:    var(--p-indigo-700);
  --text-on-accent: #FFFFFF;

  /* Границы. border-control обязателен для интерактивных контролов:
     ≥ 3:1 к фону по WCAG 2.2 (1.4.11 Non-text Contrast). */
  --border-subtle:  var(--p-neutral-150);
  --border-default: var(--p-neutral-200);
  --border-control: var(--p-neutral-500);
  --border-strong:  var(--p-neutral-300);
  --border-accent:  var(--p-indigo-600);

  /* Акцент */
  --accent-solid:        var(--p-indigo-600);
  --accent-solid-hover:  var(--p-indigo-700);
  --accent-solid-active: var(--p-indigo-800);
  --accent-soft:         var(--p-indigo-050);
  --accent-soft-hover:   var(--p-indigo-100);
  --accent-border:       var(--p-indigo-200);
  --accent-text:         var(--p-indigo-700);

  /* Статусы: solid — заливка, soft — фон бейджа, line — рамка, text — надпись */
  --success-solid: var(--p-green-600); --success-soft: var(--p-green-050);
  --success-line:  #A9DCC7;            --success-text: var(--p-green-700);
  --warning-solid: var(--p-amber-600); --warning-soft: var(--p-amber-050);
  --warning-line:  #E8CE9A;            --warning-text: var(--p-amber-700);
  --danger-solid:  var(--p-red-600);   --danger-soft:  var(--p-red-050);
  --danger-line:   #F0BDB7;            --danger-text:  var(--p-red-700);
  --danger-solid-hover:  #9E1D16;      --danger-solid-active: #85160F;
  --info-solid:    var(--p-teal-600);  --info-soft:    var(--p-teal-050);
  --info-line:     #A8D2DF;            --info-text:    var(--p-teal-700);
  --neutral-soft:  var(--p-neutral-100); --neutral-line: var(--p-neutral-300);
  --neutral-text:  var(--p-neutral-700);

  /* Фокус — единое кольцо на всё приложение */
  --focus-ring-color:  var(--p-indigo-600);
  --focus-ring-offset: var(--surface-default);
  --focus-ring-width:  2px;
  --focus-ring-gap:    2px;

  /* Тени. Сдержанные, максимум два слоя, только на слоях, оторванных от
     плоскости: дропдаун, модалка, тост, липкая панель. */
  --shadow-xs: 0 1px 1px rgba(14, 18, 24, .04), 0 1px 2px rgba(14, 18, 24, .05);
  --shadow-sm: 0 1px 2px rgba(14, 18, 24, .05), 0 4px 10px -6px rgba(14, 18, 24, .12);
  --shadow-md: 0 2px 4px -2px rgba(14, 18, 24, .06), 0 10px 24px -10px rgba(14, 18, 24, .16);
  --shadow-lg: 0 4px 8px -4px rgba(14, 18, 24, .08), 0 24px 56px -20px rgba(14, 18, 24, .26);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, .06);

  /* Изображения в интерфейсе получают собственную «подложку»,
     чтобы белые фото товара не сливались с белой карточкой. */
  --media-bg: var(--p-neutral-100);
  --media-ring: rgba(14, 18, 24, .08);
}

/* -------------------------------------------- 3b. СЕМАНТИКА — ТЁМНАЯ ТЕМА */
/* Не инверсия: собственная светлотная лестница, приглушённые статусные тона,
   поднятая светлота акцента, тени плотнее и дополнены верхним бликом. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --surface-canvas:   var(--p-dark-canvas);
    --surface-default:  var(--p-dark-surface);
    --surface-raised:   var(--p-dark-raised);
    --surface-sunken:   var(--p-dark-sunken);
    --surface-inset:    #12171E;
    --surface-overlay:  #1D242E;
    --surface-hover:    #1E242E;
    --surface-active:   #232A35;
    --surface-selected: var(--p-indigo-dark-bg);
    --surface-disabled: #1A1F27;
    --scrim:            rgba(4, 6, 10, .64);

    --text-primary:   var(--p-dark-text);
    --text-secondary: var(--p-dark-text-2);
    --text-muted:     var(--p-dark-text-3);
    --text-disabled:  #5A6472;
    --text-inverse:   var(--p-neutral-950);
    --text-accent:    var(--p-indigo-light-200);
    --text-on-accent: #FFFFFF;

    --border-subtle:  #1F252E;
    --border-default: var(--p-dark-line);
    --border-control: var(--p-dark-control);
    --border-strong:  var(--p-dark-line-2);
    --border-accent:  var(--p-indigo-light-300);

    --accent-solid:        var(--p-indigo-dark-solid);
    --accent-solid-hover:  #4A66E4;
    --accent-solid-active: #5B77EE;
    --accent-soft:         var(--p-indigo-dark-bg);
    --accent-soft-hover:   #1D2748;
    --accent-border:       #2F3D6B;
    --accent-text:         var(--p-indigo-light-200);

    --success-solid: #16A97A; --success-soft: var(--p-green-dark-bg);
    --success-line:  #1E4A3C; --success-text: var(--p-green-light);
    --warning-solid: #C98A16; --warning-soft: var(--p-amber-dark-bg);
    --warning-line:  #4A3717; --warning-text: var(--p-amber-light);
    --danger-solid:  #D6453A; --danger-soft:  var(--p-red-dark-bg);
    --danger-line:   #4E2521; --danger-text:  var(--p-red-light);
    --danger-solid-hover:  #C23A30; --danger-solid-active: #AD3129;
    --info-solid:    #1893B4; --info-soft:    var(--p-teal-dark-bg);
    --info-line:     #16414F; --info-text:    var(--p-teal-light);
    --neutral-soft:  var(--p-dark-badge); --neutral-line: #333B47;
    --neutral-text:  var(--p-dark-badge-t);

    --focus-ring-color:  var(--p-indigo-light-300);
    --focus-ring-offset: var(--surface-default);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .44), 0 4px 12px -6px rgba(0, 0, 0, .50);
    --shadow-md: 0 2px 6px -2px rgba(0, 0, 0, .50), 0 12px 28px -12px rgba(0, 0, 0, .62);
    --shadow-lg: 0 6px 12px -6px rgba(0, 0, 0, .55), 0 28px 64px -24px rgba(0, 0, 0, .70);

    --media-bg: #1F2630;
    --media-ring: rgba(255, 255, 255, .07);
  }
}

/* Явный выбор темы пользователем перекрывает системный. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --surface-canvas:   var(--p-dark-canvas);
  --surface-default:  var(--p-dark-surface);
  --surface-raised:   var(--p-dark-raised);
  --surface-sunken:   var(--p-dark-sunken);
  --surface-inset:    #12171E;
  --surface-overlay:  #1D242E;
  --surface-hover:    #1E242E;
  --surface-active:   #232A35;
  --surface-selected: var(--p-indigo-dark-bg);
  --surface-disabled: #1A1F27;
  --scrim:            rgba(4, 6, 10, .64);

  --text-primary:   var(--p-dark-text);
  --text-secondary: var(--p-dark-text-2);
  --text-muted:     var(--p-dark-text-3);
  --text-disabled:  #5A6472;
  --text-inverse:   var(--p-neutral-950);
  --text-accent:    var(--p-indigo-light-200);
  --text-on-accent: #FFFFFF;

  --border-subtle:  #1F252E;
  --border-default: var(--p-dark-line);
  --border-control: var(--p-dark-control);
  --border-strong:  var(--p-dark-line-2);
  --border-accent:  var(--p-indigo-light-300);

  --accent-solid:        var(--p-indigo-dark-solid);
  --accent-solid-hover:  #4A66E4;
  --accent-solid-active: #5B77EE;
  --accent-soft:         var(--p-indigo-dark-bg);
  --accent-soft-hover:   #1D2748;
  --accent-border:       #2F3D6B;
  --accent-text:         var(--p-indigo-light-200);

  --success-solid: #16A97A; --success-soft: var(--p-green-dark-bg);
  --success-line:  #1E4A3C; --success-text: var(--p-green-light);
  --warning-solid: #C98A16; --warning-soft: var(--p-amber-dark-bg);
  --warning-line:  #4A3717; --warning-text: var(--p-amber-light);
  --danger-solid:  #D6453A; --danger-soft:  var(--p-red-dark-bg);
  --danger-line:   #4E2521; --danger-text:  var(--p-red-light);
  --danger-solid-hover:  #C23A30; --danger-solid-active: #AD3129;
  --info-solid:    #1893B4; --info-soft:    var(--p-teal-dark-bg);
  --info-line:     #16414F; --info-text:    var(--p-teal-light);
  --neutral-soft:  var(--p-dark-badge); --neutral-line: #333B47;
  --neutral-text:  var(--p-dark-badge-t);

  --focus-ring-color:  var(--p-indigo-light-300);
  --focus-ring-offset: var(--surface-default);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .44), 0 4px 12px -6px rgba(0, 0, 0, .50);
  --shadow-md: 0 2px 6px -2px rgba(0, 0, 0, .50), 0 12px 28px -12px rgba(0, 0, 0, .62);
  --shadow-lg: 0 6px 12px -6px rgba(0, 0, 0, .55), 0 28px 64px -24px rgba(0, 0, 0, .70);

  --media-bg: #1F2630;
  --media-ring: rgba(255, 255, 255, .07);
}

/* ------------------------------------------------- 3c. НЕЦВЕТОВЫЕ ТОКЕНЫ */
:root {
  /* Шрифтовые стеки */
  --font-display: 'Golos Text', 'Inter', 'Inter Fallback', system-ui, sans-serif;
  --font-ui:      'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, 'DejaVu Sans Mono', monospace;

  /* Модульная шкала. База 15 px — плотность рабочего кабинета;
     16 px отдельной ступенью для длинного читаемого текста (тело поста). */
  --fs-100: 0.75rem;    /* 12 — микроподписи, служебные метки */
  --fs-200: 0.8125rem;  /* 13 — бейджи, вторичная мета */
  --fs-300: 0.875rem;   /* 14 — плотный UI, таблицы, кнопки sm */
  --fs-400: 0.9375rem;  /* 15 — базовый размер интерфейса */
  --fs-450: 1rem;       /* 16 — тело поста, длинный текст */
  --fs-500: 1.125rem;   /* 18 — лид, крупная кнопка */
  --fs-600: 1.25rem;    /* 20 — H4 / заголовок карточки */
  --fs-700: 1.5rem;     /* 24 — H3 / заголовок секции */
  --fs-800: 1.875rem;   /* 30 — H2 / заголовок экрана */
  --fs-900: 2.375rem;   /* 38 — H1 / дисплей */

  --lh-tight:   1.15;
  --lh-snug:    1.25;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.011em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.06em;

  /* Шкала отступов, 4-pt baseline (шаг 4, начиная с 8 — кратно 8) */
  --sp-0:  0;
  --sp-1:  0.125rem; /*  2 */
  --sp-2:  0.25rem;  /*  4 */
  --sp-3:  0.375rem; /*  6 */
  --sp-4:  0.5rem;   /*  8 */
  --sp-5:  0.75rem;  /* 12 */
  --sp-6:  1rem;     /* 16 */
  --sp-7:  1.25rem;  /* 20 */
  --sp-8:  1.5rem;   /* 24 */
  --sp-9:  2rem;     /* 32 */
  --sp-10: 2.5rem;   /* 40 */
  --sp-11: 3rem;     /* 48 */
  --sp-12: 4rem;     /* 64 */
  --sp-13: 5rem;     /* 80 */

  /* Радиусы. Потолок 16 px: выше — «детский конструктор». */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* Слои */
  --z-base:     0;
  --z-sticky:   100;
  --z-header:   200;
  --z-drawer:   300;
  --z-dropdown: 400;
  --z-scrim:    500;
  --z-modal:    510;
  --z-toast:    600;
  --z-tooltip:  700;

  /* Движение. Анимируем только transform и opacity. */
  --dur-1: 80ms;   /* мгновенная обратная связь: нажатие */
  --dur-2: 120ms;  /* hover, смена цвета */
  --dur-3: 160ms;  /* появление мелких слоёв */
  --dur-4: 220ms;  /* модалка, тост, панель */
  --dur-5: 320ms;  /* крупная панель, drawer */
  --ease-out:        cubic-bezier(.22, .61, .36, 1);
  --ease-in:         cubic-bezier(.55, .06, .68, .19);
  --ease-in-out:     cubic-bezier(.4, 0, .2, 1);
  --ease-emphasized: cubic-bezier(.2, .9, .25, 1);

  /* Геометрия макета */
  --layout-sidebar:      264px;
  --layout-sidebar-mini: 72px;
  --layout-topbar:       60px;
  --layout-content-max:  1120px;
  --layout-gutter:       var(--sp-8);
  --layout-gutter-sm:    var(--sp-6);

  /* Брейкпоинты — документация; в @media подставляются числами вручную */
  --bp-xs: 360px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;

  /* Минимальная область нажатия на тач-устройствах (WCAG 2.2 — 2.5.8) */
  --hit-area: 44px;
}

/* --------------------------------------------------------------- 4. RESET */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-400);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}

p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

hr {
  border: 0;
  border-top: 1px solid var(--border-default);
  margin: 0;
}

::selection {
  background: var(--accent-soft);
  color: var(--text-accent);
}

/* Единое кольцо фокуса. Клавиатурный фокус виден ВСЕГДА — outline не снимаем. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-gap);
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Уважение к системной настройке «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   4. СИНЯЯ ЛИНИЯ: градиенты, свечения, движение
   ----------------------------------------------------------------------------
   Надстройка над семантикой v1.0, а не замена ей. Базовые токены остаются
   единственным источником цвета текста, границ и поверхностей: перекрасив их,
   пришлось бы заново проверять контраст на каждом экране.

   Здесь появляется то, чего в плоской системе не было: градиентные заливки
   для главных действий, мягкое свечение вокруг активного элемента и общая
   лестница длительностей. Градиент живёт ТОЛЬКО на акцентных плоскостях —
   кнопке первичного действия, шапке, полосе прогресса, активной вкладке;
   заливать им карточки и подложки нельзя: текст на градиенте перестаёт
   держать контраст, а экран превращается в витрину.
   ========================================================================== */

:root {
  /* Синяя ось. Индиго переходит в лазурь: у перехода один тон-«родитель»
     (hue 232 → 200), поэтому середина не уходит в грязный фиолетовый. */
  --p-blue-050: #EEF4FF;
  --p-blue-100: #DCE7FF;
  --p-blue-200: #BBD0FF;
  --p-blue-300: #8FB2FF;
  --p-blue-400: #5C8CFA;
  --p-blue-500: #3B6DEF;
  --p-blue-600: #2454DC;
  --p-blue-700: #1D43B4;
  --p-blue-800: #1A3789;
  --p-blue-900: #162B63;
  --p-cyan-400: #22B8E6;
  --p-cyan-500: #0E9FD1;
  --p-cyan-600: #0B83AE;

  /* Градиенты. Угол 135° — свет «сверху слева», как у остальных теней. */
  --gradient-accent:      linear-gradient(135deg, var(--p-blue-600) 0%, var(--p-blue-500) 45%, var(--p-cyan-500) 100%);
  --gradient-accent-hover:linear-gradient(135deg, var(--p-blue-700) 0%, var(--p-blue-600) 45%, var(--p-cyan-600) 100%);
  --gradient-soft:        linear-gradient(135deg, var(--p-blue-050) 0%, #F1F8FF 100%);
  --gradient-header:      linear-gradient(120deg, #12224E 0%, #1B3A7A 55%, #14527A 100%);
  --gradient-sheen:       linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 100%);
  --gradient-skeleton:    linear-gradient(90deg, var(--p-neutral-100) 25%, var(--p-neutral-050) 37%, var(--p-neutral-100) 63%);

  /* Свечение вместо тяжёлой тени: акцент «подсвечивает» плоскость под собой. */
  --glow-accent:      0 8px 24px -10px rgba(36, 84, 220, .55);
  --glow-accent-lg:   0 16px 40px -14px rgba(36, 84, 220, .55);
  --glow-success:     0 8px 24px -10px rgba(15, 122, 84, .45);
  --glow-danger:      0 8px 24px -10px rgba(180, 36, 28, .45);

  /* Движение. Одна лестница на всё приложение: интерфейс, где каждый элемент
     анимируется по-своему, читается как несколько разных программ. */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-instant: 90ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    380ms;

  /* Перекрашиваем ТОЛЬКО акцент: синий вместо прежнего индиго. Остальная
     семантика — поверхности, текст, статусы — остаётся нетронутой. */
  --accent-solid:        var(--p-blue-600);
  --accent-solid-hover:  var(--p-blue-700);
  --accent-solid-active: var(--p-blue-800);
  --accent-soft:         var(--p-blue-050);
  --accent-soft-hover:   var(--p-blue-100);
  --accent-border:       var(--p-blue-200);
  --accent-text:         var(--p-blue-700);
  --border-accent:       var(--p-blue-600);
  --focus-ring-color:    var(--p-blue-600);
  --surface-selected:    var(--p-blue-050);
}

/* Тёмная тема: градиент тот же по построению, но светлее — на тёмном фоне
   насыщенный синий выглядит чернильным пятном. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --gradient-accent:       linear-gradient(135deg, var(--p-blue-500) 0%, var(--p-blue-400) 45%, var(--p-cyan-400) 100%);
    --gradient-accent-hover: linear-gradient(135deg, var(--p-blue-400) 0%, #6F9BFF 45%, #3FC6EE 100%);
    --gradient-soft:         linear-gradient(135deg, #16203A 0%, #12283A 100%);
    --gradient-header:       linear-gradient(120deg, #0C1730 0%, #12294F 55%, #0E3550 100%);
    --gradient-skeleton:     linear-gradient(90deg, #1B222C 25%, #222A36 37%, #1B222C 63%);
    --glow-accent:           0 8px 24px -10px rgba(92, 140, 250, .45);
    --glow-accent-lg:        0 16px 40px -14px rgba(92, 140, 250, .45);

    --accent-solid:       var(--p-blue-500);
    --accent-solid-hover: var(--p-blue-400);
    --accent-soft:        #15233F;
    --accent-text:        var(--p-blue-300);
    --focus-ring-color:   var(--p-blue-400);
  }
}

/* Уважение к системной настройке «меньше движения» — одно правило на всё:
   анимации в интерфейсе служат ориентировке, а не украшению, и человек,
   попросивший их убрать, обязан получить работающий экран, а не сломанный. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}