/* =============================================================================
   ДИЗАЙН-ТОКЕНЫ СМК                                                  v1.0
   /frontend/web/css/smk-tokens.css
   Подключать ПЕРВЫМ, до всех остальных стилей, на каждой странице.

   ── Как этим пользоваться ────────────────────────────────────────────────
   Два слоя. Компоненты обращаются ТОЛЬКО ко второму.

   Слой 1, примитивы (--lilac-500, --ink-200 …) — сырые шкалы. В вёрстке
   страниц их использовать нельзя: если завтра поменяется оформление,
   придётся править каждый файл.

   Слой 2, семантика (--fg-default, --action-bg …) — роли. Именно на них
   ссылаются кнопки, поля, карточки. Перевод очередной страницы на единый
   стиль = замена хардкода цвета на семантический токен.

   ── Источник ─────────────────────────────────────────────────────────────
   Четыре цвета взяты из брендбука СМК и зафиксированы точно:
     PANTONE 7668     #6C73A5  сиреневый          → --lilac-500
     PANTONE 7445     #A3A1C8  серо-фиолетовый    → --lilac-300
     PANTONE 2154 C   #004680  благородный синий  → --blue-700
     PANTONE Black 6C #101820  почти чёрный       → --ink-950
   Остальные ступени вычислены в OKLCH (не в HSL — в HSL ступени
   получаются неравномерными на глаз) с сохранением тона брендбука.
   Тон нейтральных шкал 249° совпадает с тоном Black 6 C, поэтому серые
   не спорят с фирменными цветами, а поддерживают их.

   ── Что нельзя ───────────────────────────────────────────────────────────
   #A3A1C8 (7445) НИКОГДА не используется для текста: контраст с белым
   2.47:1 при минимуме 4.5:1 по WCAG 2.1 AA. Это цвет линий, подложек,
   декора и неактивных состояний.
   ============================================================================= */

:root{
  /* ═══════════════ СЛОЙ 1 — ПРИМИТИВЫ ═══════════════ */

  /* Сиреневая шкала — айдентика. 300 и 500 из брендбука. */
  --lilac-50: #F7F6FF;
  --lilac-100: #EDECFE;
  --lilac-200: #D2D0EE;
  --lilac-300: #A3A1C8;
  --lilac-400: #878AB9;
  --lilac-500: #6C73A5;
  --lilac-600: #596190;
  --lilac-700: #474F7A;
  --lilac-800: #363E63;
  --lilac-900: #262D49;
  --lilac-950: #191E32;

  /* Синяя шкала — действия. 700 из брендбука. */
  --blue-50: #EFF8FF;
  --blue-100: #DCEFFF;
  --blue-200: #B5D7FB;
  --blue-300: #8BBBEF;
  --blue-400: #457FBC;
  --blue-500: #2363A2;
  --blue-600: #125491;
  --blue-700: #004680;
  --blue-800: #003868;
  --blue-900: #00294C;
  --blue-950: #031B30;

  /* Нейтральные — текст, поверхности, границы. 950 из брендбука. */
  --ink-0: #FFFFFF;
  --ink-25: #FAFBFD;
  --ink-50: #F4F7FA;
  --ink-100: #ECF0F4;
  --ink-200: #DDE2E7;
  --ink-300: #C7CDD3;
  --ink-400: #A2A9B0;
  --ink-500: #828991;
  --ink-600: #666E76;
  --ink-700: #4E565F;
  --ink-800: #394149;
  --ink-900: #242C35;
  --ink-950: #101820;

  /* Функциональные. Приглушены под холодную гамму брендбука. */
  --red-50: #FFF3F1;
  --red-100: #FFE4E0;
  --red-200: #FFC9C2;
  --red-300: #F4A79E;
  --red-400: #DB7D73;
  --red-500: #C66057;
  --red-600: #AC4A42;
  --red-700: #8E3A33;
  --red-800: #712D27;
  --red-900: #53201C;

  --amber-50: #FCF5EC;
  --amber-100: #F8EAD5;
  --amber-200: #EDD4AE;
  --amber-300: #DCB77F;
  --amber-400: #C09347;
  --amber-500: #AA7918;
  --amber-600: #926300;
  --amber-700: #784F00;
  --amber-800: #5F3E00;
  --amber-900: #452D00;

  --green-50: #F1F9F2;
  --green-100: #E0F1E3;
  --green-200: #C2E2C9;
  --green-300: #9DCBA8;
  --green-400: #70AC80;
  --green-500: #519465;
  --green-600: #3C7D50;
  --green-700: #2D663F;
  --green-800: #225131;
  --green-900: #193B23;

  /* ═══════════════ СЛОЙ 2 — СЕМАНТИКА ═══════════════ */

  /* --- поверхности --- */
  --bg-page:            var(--ink-50);
  --bg-surface:         #FFFFFF;
  --bg-raised:          #FFFFFF;
  --bg-sunken:          var(--ink-100);
  --bg-field:           var(--ink-50);
  --bg-field-hover:     var(--ink-100);
  --bg-inverse:         var(--ink-950);
  --bg-brand:           var(--lilac-500);
  --bg-brand-subtle:    var(--lilac-50);
  --bg-brand-deep:      var(--lilac-900);
  --bg-overlay:         rgba(16, 24, 32, .58);

  /* --- текст --- */
  --fg-default:         var(--ink-950);   /* 17.9:1 */
  --fg-muted:           var(--ink-700);   /*  7.5:1 */
  --fg-subtle:          var(--ink-600);   /*  5.2:1 — минимум для мелкого текста */
  --fg-disabled:        var(--ink-400);   /* только для неактивных элементов */
  --fg-on-dark:         #FFFFFF;
  --fg-on-brand:        #FFFFFF;          /*  4.5:1 на --lilac-500, ровно порог */
  --fg-link:            var(--blue-700);  /*  9.6:1 */
  --fg-link-hover:      var(--blue-800);
  --fg-brand:           var(--lilac-500); /* 4.53:1 — можно, но не мельче 15px */

  /* --- границы --- */
  --border-subtle:      var(--ink-200);
  --border-default:     var(--ink-300);
  --border-strong:      var(--ink-400);
  --border-brand:       var(--lilac-300);
  --border-focus:       var(--lilac-500);
  --ring-focus:         0 0 0 3px rgba(108, 115, 165, .32);
  --ring-danger:        0 0 0 3px rgba(150, 60, 50, .20);

  /* --- основное действие --- */
  --action-bg:          var(--blue-700);
  --action-bg-hover:    var(--blue-800);
  --action-bg-active:   var(--blue-900);
  --action-bg-disabled: var(--ink-300);
  --action-fg:          #FFFFFF;
  --action-fg-disabled: var(--ink-500);

  /* --- второстепенное действие --- */
  --action2-bg:         #FFFFFF;
  --action2-bg-hover:   var(--ink-50);
  --action2-border:     var(--ink-300);
  --action2-fg:         var(--ink-950);

  /* --- третичное / ghost --- */
  --action3-bg-hover:   var(--lilac-50);
  --action3-fg:         var(--blue-700);

  /* --- состояния --- */
  --status-danger-bg:     var(--red-50);
  --status-danger-border: var(--red-200);
  --status-danger-fg:     var(--red-800);
  --status-danger-solid:  var(--red-600);

  --status-warning-bg:     var(--amber-50);
  --status-warning-border: var(--amber-200);
  --status-warning-fg:     var(--amber-900);
  --status-warning-solid:  var(--amber-500);

  --status-success-bg:     var(--green-50);
  --status-success-border: var(--green-200);
  --status-success-fg:     var(--green-800);
  --status-success-solid:  var(--green-600);

  --status-info-bg:        var(--blue-50);
  --status-info-border:    var(--blue-200);
  --status-info-fg:        var(--blue-800);
  --status-info-solid:     var(--blue-700);

  /* ═══════════════ ТИПОГРАФИКА ═══════════════
     Брендбук предписывает Raleway в трёх начертаниях:
     Regular 400 — абзацы, SemiBold 600 — заголовки, Bold Italic 700i — выделение.
     Ничего четвёртого не подключаем. */
  --font-sans: "Raleway", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

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

  --text-2xs: .938rem;   --lh-2xs: 1.45;   /* 15px — только служебные подписи */
  --text-xs:  1rem;      --lh-xs:  1.50;   /* 16px */
  --text-sm:  1.0625rem; --lh-sm:  1.50;   /* 17px — подписи полей */
  --text-base:1.1875rem; --lh-base:1.60;   /* 19px — основной текст */
  --text-md:  1.25rem;   --lh-md:  1.55;   /* 20px — поля ввода (меньше нельзя: iOS зумит) */
  --text-lg:  1.375rem;  --lh-lg:  1.45;   /* 22px */
  --text-xl:  1.5625rem; --lh-xl:  1.35;   /* 25px */
  --text-2xl: 1.8125rem; --lh-2xl: 1.25;   /* 29px */
  --text-3xl: 2.125rem;  --lh-3xl: 1.20;   /* 34px */
  --text-4xl: 2.625rem;  --lh-4xl: 1.12;   /* 42px */
  --text-5xl: 3.125rem;  --lh-5xl: 1.05;   /* 50px */

  /* Raleway геометричный и узковатый: крупным кеглям нужен минусовый трекинг,
     мелким — плюсовой, иначе заголовки рассыпаются, а подписи слипаются. */
  --tracking-tight: -.018em;
  --tracking-snug:  -.010em;
  --tracking-normal: 0;
  --tracking-wide:   .015em;
  --tracking-caps:   .06em;

  /* ═══════════════ РАЗМЕРЫ ═══════════════ */
  --sp-0: 0;      --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;
  --sp-4: 1rem;   --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;
  --sp-10: 2.5rem;--sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;

  --radius-xs: 4px;  --radius-sm: 6px;  --radius-md: 8px;
  --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px;
  --radius-full: 999px;

  --control-h-sm: 36px;
  --control-h-md: 44px;   /* минимум для касания */
  --control-h-lg: 48px;
  --control-h-xl: 52px;

  /* Тени подкрашены в тон Black 6 C, а не чистым чёрным:
     нейтрально-чёрная тень на цветной подложке всегда выглядит грязной. */
  --shadow-xs: 0 1px 2px rgba(16, 24, 32, .06);
  --shadow-sm: 0 1px 3px rgba(16, 24, 32, .08), 0 1px 2px rgba(16, 24, 32, .04);
  --shadow-md: 0 4px 12px -2px rgba(16, 24, 32, .10), 0 2px 4px -2px rgba(16, 24, 32, .06);
  --shadow-lg: 0 12px 28px -8px rgba(16, 24, 32, .16), 0 4px 8px -4px rgba(16, 24, 32, .08);
  --shadow-xl: 0 24px 56px -16px rgba(16, 24, 32, .22);

  /* ═══════════════ ДВИЖЕНИЕ ═══════════════
     Портал открывают каждый день, поэтому анимации служебные, а не эффектные:
     всё до 200 мс и только opacity/transform — свойства, которые не заставляют
     браузер пересчитывать раскладку. */
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
  --dur-crossfade: 1100ms;   /* смена фоновых слайдов */

  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* ═══════════════ СЛОИ ═══════════════ */
  --z-base: 0;  --z-raised: 10; --z-sticky: 100; --z-header: 200;
  --z-dropdown: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700;
}

/* =============================================================================
   ТЁМНАЯ ТЕМА — задел на будущее.
   Переопределяется ТОЛЬКО слой 2. Ни один компонент менять не придётся —
   в этом весь смысл двухслойной схемы.
   ============================================================================= */
[data-theme="dark"]{
  --bg-page:         var(--ink-950);
  --bg-surface:      var(--ink-900);
  --bg-raised:       var(--ink-800);
  --bg-sunken:       #0B1116;
  --bg-field:        var(--ink-800);
  --bg-field-hover:  var(--ink-700);
  --bg-inverse:      var(--ink-50);
  --bg-brand-subtle: var(--lilac-950);

  --fg-default:      var(--ink-50);
  --fg-muted:        var(--ink-300);
  --fg-subtle:       var(--ink-400);
  --fg-disabled:     var(--ink-600);
  --fg-link:         var(--lilac-300);
  --fg-link-hover:   var(--lilac-200);
  --fg-brand:        var(--lilac-400);

  --border-subtle:   var(--ink-800);
  --border-default:  var(--ink-700);
  --border-strong:   var(--ink-600);

  --action-bg:       var(--blue-500);
  --action-bg-hover: var(--blue-400);
  --action-bg-active:var(--blue-600);
}

/* =============================================================================
   БАЗА
   ============================================================================= */
*, *::before, *::after{ box-sizing: border-box; }

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

body{
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  color: var(--fg-default);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4{
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}
h1{ font-size: var(--text-3xl); line-height: var(--lh-3xl); letter-spacing: var(--tracking-tight); }
h2{ font-size: var(--text-2xl); line-height: var(--lh-2xl); }
h3{ font-size: var(--text-xl);  line-height: var(--lh-xl); }
h4{ font-size: var(--text-lg);  line-height: var(--lh-lg); }

em, i{ font-style: italic; }
strong, b{ font-weight: var(--fw-semibold); }
/* брендбук: выделение — Bold Italic */
.smk-emphasis{ font-weight: var(--fw-bold); font-style: italic; }

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

:focus-visible{ outline: 2px solid var(--border-focus); outline-offset: 2px; }

.smk-caps{ text-transform: uppercase; letter-spacing: var(--tracking-caps);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); }

.smk-sr{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}