/* =============================================================
   НЕ КАК ВСЕ — design tokens
   Single source of truth for colour, type, space and motion.
   Edit here first: everything else references these variables.
   ============================================================= */

:root {
  /* ---- Brand ------------------------------------------------
     Taken from the logo kit palette:
     #fefefe  #ec28fc  #fefb05  #141012                        */
  --magenta:        #ec28fc;
  --magenta-soft:   #f36bff;
  --magenta-deep:   #a211b0;
  --yellow:         #fefb05;
  --yellow-soft:    #fffc5c;
  --yellow-deep:    #c8c600;
  --violet:         #8b19ff;   /* depth / glow only, never a fill */
  --violet-line:    #9700ff;   /* обводка и градиент карточек «О нас» */

  /* ---- Surfaces ---------------------------------------------
     Near-black stack. Large areas stay quiet so the two accent
     colours keep their punch.                                  */
  --ink-0:          #000000;   /* страница: чистый чёрный, без подцветки */
  --ink-1:          #0d0d10;   /* raised band */
  --header-bg:      #131313;   /* шапка, по макету */
  --ink-2:          #131318;   /* card */
  --ink-3:          #1b1b22;   /* card hover / input */
  --ink-4:          #26262f;   /* border-ish fill */

  /* ---- Lines ------------------------------------------------ */
  --line:           rgba(255, 255, 255, .085);
  --line-2:         rgba(255, 255, 255, .15);
  --line-accent:    rgba(236, 40, 252, .38);
  --line-warm:      rgba(254, 251, 5, .32);

  /* ---- Text ------------------------------------------------- */
  --text:           #f4f4f6;
  --text-2:         #a9abb5;
  --text-3:         #70727c;
  --text-on-accent: #0a0a0c;

  /* ---- Feedback --------------------------------------------- */
  --ok:             #37d67a;
  --warn:           #ffb020;
  --danger:         #ff5c7a;

  /* ---- Type -------------------------------------------------
     Unbounded carries the attitude; Roboto keeps prose readable.
     Roboto, а не Inter: ширины строк в макетах сходятся с ним до
     десятых — и на первом экране, и в блоке «О нас». */
  --font-display: 'Unbounded', 'Arial Black', sans-serif;
  --font-body:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mark:    'Caveat', 'Comic Sans MS', cursive;

  /* 75px на макетной ширине 1920 (макет «Широкие компы») */
  --fs-display:  clamp(2.25rem, 3.91vw, 4.6875rem);
  --fs-h1:       clamp(2.25rem, 4.6vw, 4rem);
  --fs-h2:       clamp(1.85rem, 3.4vw, 3rem);
  --fs-h3:       clamp(1.3rem, 1.9vw, 1.75rem);
  --fs-h4:       1.0625rem;
  --fs-body:     1.0625rem;
  --fs-sm:       .9375rem;
  --fs-xs:       .8125rem;
  --fs-kicker:   .6875rem;

  --lh-display:  .933;   /* 70 / 75 по макету */
  --lh-head:     1.04;
  --lh-body:     1.62;

  --tracking-kicker: .18em;
  --tracking-tight:  -.03em;

  /* ---- Space ------------------------------------------------ */
  --sp-1:  .25rem;
  --sp-2:  .5rem;
  --sp-3:  .75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  --header-h:    64px;   /* высота шапки: первый экран считается от неё */
  /* Полоса с логотипом и контактами над шапкой. Ноль по умолчанию:
     на узких экранах её нет, и все расчёты высоты остаются прежними.
     Рабочее значение включается в site.css от 1040 px. */
  --topbar-h:    0px;
  /* Отступы блоков считаются от высоты экрана, а не ширины: каждый блок
     должен помещаться в один экран целиком. */
  --section-y:   clamp(1.75rem, 4.5vh, 3.25rem);
  --gutter:      clamp(1rem, 3.2vw, 2.5rem);
  /* Макет нарисован на 1920: контент 1460, поля по 230.
     На экранах уже контейнер держит ту же долю ширины — см. base.css. */
  --container:        1460px;
  --container-wide:   1602px;   /* шапка шире контента: поля 159 по макету */
  --container-narrow:  900px;

  /* ---- Shape ------------------------------------------------ */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;
  /* Скругление плашек из макетов — 36 при ширине экрана 1920.
     Задано длиной, а не процентом: процент берёт по горизонтали
     долю ширины, а по вертикали долю высоты, и угол выходит
     эллипсом. Нижняя граница держит форму на узких экранах. */
  --r-plate: clamp(22px, 1.875vw, 36px);

  /* ---- Elevation -------------------------------------------- */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .3);
  --shadow-md: 0 14px 38px rgba(0, 0, 0, .42);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, .55);
  --glow-magenta: 0 0 38px rgba(236, 40, 252, .22);
  --glow-yellow:  0 0 38px rgba(254, 251, 5, .18);

  /* ---- Motion ----------------------------------------------- */
  --ease:      cubic-bezier(.2, .7, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --t-fast:    .16s;
  --t-med:     .28s;
  --t-slow:    .55s;

  /* ---- Layers ----------------------------------------------- */
  --z-decor:   1;
  --z-content: 2;
  --z-sticky:  40;
  --z-header:  50;
  --z-overlay: 90;
  --z-modal:   100;
  --z-toast:   120;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-med: 0s; --t-slow: 0s; }
}