/* ==========================================================================
   APS Design System — токены (v1.0.0, 2026-08-13)
   Источник значений: логотип ТОО «Asia Premium Service» + tokens.json
   Подключать первым файлом. Никаких «магических» значений в компонентах —
   только var(--aps-*).
   ========================================================================== */

:root {
  /* --- Бренд: navy ------------------------------------------------------ */
  --aps-navy-50:  #F2F5FA;
  --aps-navy-100: #E2E7F3;
  --aps-navy-200: #C9D2E8;
  --aps-navy-300: #A2B2D7;
  --aps-navy-400: #778EC5;
  --aps-navy-500: #4C6AB3;
  --aps-navy-600: #3D558F;
  --aps-navy-700: #2E406B;
  --aps-navy-800: #222F4F;
  --aps-navy-900: #172036;   /* базовый цвет логотипа */
  --aps-navy-950: #090D15;

  /* --- Бренд: red ------------------------------------------------------- */
  --aps-red-50:  #FDF0EF;
  --aps-red-100: #FADCDB;
  --aps-red-200: #F5B5B2;
  --aps-red-300: #EE7C77;
  --aps-red-400: #E74741;
  --aps-red-500: #E3271F;    /* базовый цвет логотипа */
  --aps-red-600: #C72019;
  --aps-red-700: #AC1C16;
  --aps-red-800: #881611;
  --aps-red-900: #64100C;

  /* --- Нейтральные ------------------------------------------------------ */
  --aps-white:      #FFFFFF;
  --aps-gray-50:  #F9FAFA;
  --aps-gray-100: #F2F3F5;
  --aps-gray-200: #E3E5E8;
  --aps-gray-300: #C7CBD1;
  --aps-gray-400: #A1A7B0;
  --aps-gray-500: #7A8390;
  --aps-gray-600: #626A75;
  --aps-gray-700: #4A5159;
  --aps-gray-900: #23262A;

  /* --- Статусы ---------------------------------------------------------- */
  --aps-success: #1E8E4E;
  --aps-success-bg: #E6F4EC;
  --aps-success-text: #14683A;
  /* Семья warning достроена 15.09.2026 по решению Павла — тем же методом,
     что success: тон базового цвета сохранён, светлота и насыщенность взяты
     у success-bg (L 0.929 / S 0.389) и success-text (L 0.243 / S 0.677).
     Замер: text на bg 7.19, text на белом 8.23, кромка 4 px на bg 3.17
     (у success — 6.03 / 8.59 / 3.68). Третьего акцентного цвета это
     не заводит: warning живёт только в состояниях форм и таблиц. */
  --aps-warning: #B8790B;
  --aps-warning-bg: #F4EFE6;
  --aps-warning-text: #684914;
  --aps-danger:  #C72019;
  --aps-info:    #3D558F;
  --aps-info-bg: var(--aps-navy-50);

  /* --- Роли (использовать в компонентах именно их) ---------------------- */
  --aps-bg:              var(--aps-white);
  --aps-bg-alt:          #F5F6F8;
  --aps-bg-inverse:      var(--aps-navy-900);
  --aps-bg-inverse-alt:  var(--aps-navy-800);
  --aps-surface:         var(--aps-white);
  --aps-surface-alt:     var(--aps-gray-50);
  --aps-border:          #E2E5EA;
  --aps-border-strong:   var(--aps-gray-300);
  --aps-border-ui:       var(--aps-gray-500);  /* границы полей и контролов: 3.83 на белом */
  --aps-border-inverse:  rgba(255,255,255,0.14);
  --aps-text:            var(--aps-navy-900);
  --aps-text-muted:      var(--aps-gray-600);
  --aps-text-subtle:     var(--aps-gray-500);
  --aps-text-inverse:    var(--aps-white);
  --aps-text-inverse-muted: var(--aps-navy-200);
  --aps-accent:          var(--aps-red-500);
  --aps-accent-hover:    var(--aps-red-600);
  --aps-accent-active:   var(--aps-red-700);
  --aps-accent-soft:     var(--aps-red-50);
  --aps-accent-on-dark:  var(--aps-red-300);  /* красный как ТЕКСТ на тёмном */
  --aps-accent-text:     var(--aps-red-600);  /* красный КАК ТЕКСТ: >= 5.18 на всех светлых */
  --aps-focus:           var(--aps-navy-600); /* цвет внешнего кольца фокуса */
  --aps-focus-inner:     var(--aps-white);    /* внутреннее кольцо-подложка */

  /* --- Типографика ------------------------------------------------------ */
  --aps-font: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --aps-font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  --aps-fs-display: 64px;  --aps-lh-display: 1.06;
  --aps-fs-h1: 48px;       --aps-lh-h1: 1.12;
  --aps-fs-h2: 36px;       --aps-lh-h2: 1.18;
  --aps-fs-h3: 24px;       --aps-lh-h3: 1.3;
  --aps-fs-h4: 20px;       --aps-lh-h4: 1.35;
  --aps-fs-lead: 19px;     --aps-lh-lead: 1.55;
  --aps-fs-body: 17px;     --aps-lh-body: 1.6;
  --aps-fs-small: 14px;    --aps-lh-small: 1.5;
  --aps-fs-eyebrow: 13px;  --aps-lh-eyebrow: 1.2;
  --aps-fs-stat: 48px;

  /* Числовые двойники шкалы — для сцен главной, где кегль считается от
     --aps-fit (§ 6.1б ТЗ): calc(var(--aps-fs-h2-n) * var(--aps-fit)).
     Источник чисел один: меняя кегль выше, поменяйте и двойник. */
  --aps-fs-display-n: 64;
  --aps-fs-h1-n: 48;
  --aps-fs-h2-n: 36;
  --aps-fs-h3-n: 24;
  --aps-fs-h4-n: 20;
  --aps-fs-lead-n: 19;
  --aps-fs-body-n: 17;
  --aps-fs-small-n: 14;
  --aps-fs-eyebrow-n: 13;
  --aps-fs-stat-n: 48;

  --aps-tracking-tight: -0.02em;
  --aps-tracking-wide: 0.12em;

  /* --- Отступы ---------------------------------------------------------- */
  --aps-space-1: 4px;
  --aps-space-2: 8px;
  --aps-space-3: 12px;
  --aps-space-4: 16px;
  --aps-space-5: 24px;
  --aps-space-6: 32px;
  --aps-space-7: 40px;
  --aps-space-8: 56px;
  --aps-space-9: 80px;
  --aps-space-10: 120px;
  --aps-section-py: 80px;

  /* --- Раскладка -------------------------------------------------------- */
  --aps-container: 1160px;
  --aps-container-narrow: 800px;
  --aps-gutter: 24px;

  /* --- Форма ------------------------------------------------------------ */
  --aps-radius-xs: 4px;
  --aps-radius-sm: 6px;
  --aps-radius-md: 8px;
  --aps-radius-lg: 12px;
  --aps-radius-pill: 999px;
  /* --aps-radius-xl (16px) удалён 15.09.2026: за всё время не был использован
     ни одним компонентом. Прецедент — --aps-t-slow, удалённый 16.08.2026
     по той же причине. Ступень без потребителя приглашает к «почти 12». */
  --aps-bar: 4px;               /* толщина акцентной полосы (мотив логотипа) */
  --aps-radius-bar: 2px;        /* скругление торцов полосы — названное исключение */

  /* --- Тени ------------------------------------------------------------- */
  --aps-shadow-sm: 0 1px 2px rgba(23,32,54,0.06);
  --aps-shadow-md: 0 4px 12px rgba(23,32,54,0.08);
  --aps-shadow-lg: 0 12px 32px rgba(23,32,54,0.12);
  /* Кольцо фокуса — не тень, а двухслойная обводка: см. :focus-visible
     в aps-components.css. Полупрозрачное кольцо давало 1.40–2.12 при
     требуемых 3.0 по WCAG 2.1 SC 1.4.11 и было заменено 16.08.2026. */

  /* --- Движение --------------------------------------------------------- */
  --aps-t-fast: 120ms cubic-bezier(0.2,0,0.2,1);
  --aps-t-base: 200ms cubic-bezier(0.2,0,0.2,1);
  --aps-t-focal: 600ms cubic-bezier(0.16,1,0.3,1);  /* прочерчивание кромки первого экрана */
  --aps-ease-enter: cubic-bezier(0.16,1,0.3,1);     /* уверенное прибытие, без отскока */

  /* Петли живой панели. Три длительности, а не одна: совпади они по фазе,
     карта, лента событий и спарклайн начали бы пульсировать вместе, и панель
     читалась бы как мигающая реклама, а не как работающая система. */
  --aps-t-loop: 11s;
  --aps-t-loop-fast: 9s;
  --aps-t-loop-slow: 14s;

  /* Окно scroll-driven появления. Значения подобраны так, чтобы блок был
     полностью проявлен задолго до центра экрана: анимация сопровождает чтение,
     а не задерживает его. Запрет появлений при прокрутке отменён 16.09.2026
     вместе со сменой эталона на waliot. */
  --aps-reveal-range: entry 8% cover 32%;
  --aps-reveal-shift: 12px;
}

@media (max-width: 1024px) {
  :root {
    --aps-fs-display: 48px;
    --aps-fs-h1: 40px;
    --aps-fs-h2: 30px;
    --aps-fs-h3: 22px;
    --aps-fs-h4: 19px;
    --aps-fs-lead: 18px;
    --aps-fs-stat: 40px;
    --aps-section-py: 56px;
  }
}

@media (max-width: 767px) {
  :root {
    --aps-fs-display: 36px;
    --aps-fs-h1: 32px;
    --aps-fs-h2: 26px;
    --aps-fs-eyebrow: 12px;
    --aps-fs-h3: 20px;
    --aps-fs-h4: 18px;
    --aps-fs-lead: 17px;
    --aps-fs-body: 16px;
    --aps-fs-stat: 34px;
    --aps-section-py: 40px;
    --aps-gutter: 16px;
  }
}

/* Тёмный контекст: переопределяет роли, компоненты внутри не меняются.
   Перечислены все тёмные поверхности системы — иначе компонент без
   собственного «тёмного» варианта остаётся со светлыми ролями. */
.aps-inverse,
.aps-section--inverse,
.aps-hero,
.aps-cta,
.aps-footer {
  --aps-bg: var(--aps-bg-inverse);
  --aps-bg-alt: var(--aps-bg-inverse-alt);
  --aps-surface: rgba(255,255,255,0.04);
  --aps-surface-alt: rgba(255,255,255,0.07);
  --aps-border: var(--aps-border-inverse);
  --aps-border-strong: rgba(255,255,255,0.28);
  --aps-text: var(--aps-white);
  --aps-text-muted: var(--aps-navy-200);
  --aps-text-subtle: var(--aps-navy-300);
  --aps-accent: var(--aps-red-500);          /* заливка и полосы — можно */
  --aps-accent-text: var(--aps-red-300);     /* текст — только осветлённый (6.01) */
  --aps-danger: var(--aps-red-300);
  --aps-focus: var(--aps-navy-300);          /* 7.63 на navy-900 */
  --aps-border-ui: var(--aps-navy-300);
  background: var(--aps-navy-900);
  color: var(--aps-white);
}

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