/* ════════════════════════════════════════════════════════════
   SKYBOW · «Тихий спектр» — design tokens
   Графитовая база (не чёрная) · приглушённый спектр · FT + BMW
   Display serif: Spectral · UI grotesque: Onest (обе с кириллицей)
   ════════════════════════════════════════════════════════════ */

:root{
  /* ── Surfaces — графит, не чёрный ── */
  --bg:        #181a20;   /* база — тёплый графит */
  --bg-2:      #1e2129;   /* приподнятая зона */
  --surface:   #23262f;   /* карточка */
  --surface-2: #2a2e38;   /* карточка hover / вложенная */
  --surface-3: #31353f;   /* самый верхний слой */

  /* ── Lines ── */
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);
  --line-3:    rgba(255,255,255,.22);

  /* ── Ink ── */
  --ink:    #ecedf1;   /* основной текст */
  --ink-2:  #aab0bd;   /* вторичный */
  --ink-3:  #767c8a;   /* третичный / лейблы */
  --ink-on-accent: #181a20;

  /* ── Приглушённый спектр (the quiet rainbow) ── */
  --coral:  #cf8a7e;   /* глина/терракота */
  --amber:  #cdaa6c;
  --olive:  #95ad84;
  --teal:   #77aba0;
  --azure:  #7f9ec2;
  --steel:  #6e80a8;   /* стальной индиго — холодный конец спектра (без розового) */

  /* спектральный градиент — фирменная подпись (hairline), тёплый→холодный, без pink */
  --spectrum: linear-gradient(90deg,
      #cf8a7e 0%, #cdaa6c 22%, #95ad84 44%,
      #77aba0 62%, #7f9ec2 80%, #6e80a8 100%);

  /* ── Сквозной акцент — стальной графит-блю (BMW gunmetal), мужской ── */
  --accent:        #7089a8;   /* steel blue — primary CTA, ссылки */
  --accent-deep:   #5c7490;   /* hover/press */
  --accent-dim:    rgba(112,137,168,.18);
  --accent-faint:  rgba(112,137,168,.08);

  /* ── Per-country accents (приглушённые стопы спектра) ── */
  --uz: #77aba0;   /* Узбекистан — teal */
  --kz: #7f9ec2;   /* Казахстан  — azure */
  --kg: #cdaa6c;   /* Кыргызстан — amber */
  --tj: #cf8a7e;   /* Таджикистан — глина/коралл */

  /* ── Semantic ── */
  --safe:    #95ad84;            /* «ты в порядке» — приглушённая олива */
  --safe-bg: rgba(149,173,132,.12);
  --warn:    #cdaa6c;
  --warn-bg: rgba(205,170,108,.12);
  --crisis:  #cf736c;            /* кризис — кирпич, не алярм-красный */
  --crisis-bg: rgba(207,115,108,.14);

  /* ── Type ── */
  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-ui:      'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs:  12px;
  --text-sm:  13.5px;
  --text-base:15px;
  --text-md:  17px;
  --text-lg:  20px;
  --text-xl:  26px;
  --text-2xl: 34px;
  --text-3xl: 44px;
  --text-4xl: clamp(40px, 6vw, 72px);

  --lh-tight:  1.04;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-relaxed:1.62;

  --track-display: -0.02em;
  --track-tight:   -0.01em;
  --track-label:    0.16em;

  /* ── Spacing (4-base) ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ── Radii — точные, BMW-сдержанные ── */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 9999px;

  /* ── Shadows — очень сдержанно (на графите работают границы) ── */
  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 6px 22px rgba(0,0,0,.38);
  --sh-lg: 0 18px 50px rgba(0,0,0,.5);
  --ring:  0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* ── Motion — почти статично ── */
  --dur: 160ms;
  --ease: cubic-bezier(.2,.7,.3,1);

  /* ── Layout ── */
  --container: 1080px;
  --tap: 48px;   /* минимальная цель тапа (>44) */
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--text-base);
  line-height:var(--lh-relaxed);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--accent-dim); color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}