/* =========================================================
   INDIKOM — дизайн-токены
   Фирменные цвета взяты из логотипа:
   синий #00137F, красный #E30613
   ========================================================= */

:root {
  /* --- Бренд: синий --- */
  --navy-950: #000a3d;
  --navy-900: #000f63;
  --navy-800: #00137f;  /* ФИРМЕННЫЙ */
  --navy-700: #15259b;
  --navy-600: #2b3bb5;
  --navy-500: #4455c9;
  --navy-400: #6b79d9;
  --navy-300: #9aa4e8;
  --navy-200: #c6ccf4;
  --navy-100: #e5e8fb;
  --navy-50:  #f2f4fe;

  /* --- Бренд: красный акцент --- */
  --red-700: #b00410;
  --red-600: #e30613;  /* ФИРМЕННЫЙ */
  --red-500: #fe1f2b;
  --red-100: #ffe5e7;
  --red-50:  #fff4f5;

  /* --- Бренд: голубой (из старого сайта, для «скорости»/ТВ) --- */
  --sky-700: #2b73ba;
  --sky-600: #3a93cf;
  --sky-500: #57b2e0;
  --sky-400: #71c9e9;
  --sky-100: #e2f3fb;
  --sky-50:  #f1f9fd;

  /* --- Нейтральные --- */
  --n-950: #0a0d1a;
  --n-900: #131726;
  --n-800: #1f2436;
  --n-700: #343b52;
  --n-600: #4e5670;
  --n-500: #6b7390;
  --n-400: #939ab3;
  --n-300: #bcc2d3;
  --n-200: #dce0ea;
  --n-150: #e8ebf2;
  --n-100: #f1f3f8;
  --n-50:  #f8f9fc;
  --white: #ffffff;

  /* --- Статусы --- */
  --ok-600: #0f8a4d;
  --ok-100: #e2f6ec;
  --warn-600: #c77700;
  --warn-100: #fff2dc;

  /* =======================================================
     Семантические переменные (их и используем в разметке)
     ======================================================= */
  /* «Чернила» — для текста и линий: почти чёрный с синим подтоном */
  --ink:           #0f1633;
  /* Фирменный синий — для текста, линий, кнопок и слайдера */
  --deep:          #00137f;   /* фирменный */
  --deeper:        #000f63;   /* на тон глубже: слайдер */
  /* Тёмные плоскости — фирменный синий, не чёрный */
  --paper:         #f2f4f9;

  --bg:            var(--paper);
  --bg-soft:       #e8edf7;
  --bg-muted:      #dde4f1;
  --bg-brand:      var(--deep);
  --bg-brand-deep: var(--deeper);

  --surface:       var(--white);
  --surface-raised:var(--white);

  --text:          var(--ink);
  --text-soft:     var(--n-600);
  --text-muted:    var(--n-500);
  --text-invert:   var(--white);
  --text-invert-soft: rgba(255, 255, 255, .72);

  --border:        #c8d1e6;
  --border-soft:   #dde4f0;
  --border-strong: var(--deep);
  --hairline:      #d6ddec;

  --accent:        var(--navy-800);
  --accent-hover:  var(--navy-700);
  --accent-text:   var(--white);

  --cta:           var(--red-600);
  --cta-hover:     var(--red-700);
  --cta-text:      var(--white);

  --link:          var(--navy-700);
  --link-hover:    var(--red-600);

  --focus-ring:    var(--sky-600);

  /* Иконки, чипы, таблицы — чтобы тема переключалась целиком */
  --icon-bg:       transparent;
  --icon-fg:       var(--cta);
  --chip-bg:       var(--deep);
  --chip-fg:       #ffffff;
  --nav-hover-bg:  var(--bg-soft);
  --table-head-bg: var(--deep);
  --table-head-fg: #ffffff;
  --row-hover-bg:  var(--bg-soft);

  /* --- Градиенты --- */
  --grad-brand: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 55%, var(--sky-700) 130%);
  --grad-brand-soft: var(--bg-soft);
  --grad-cta: linear-gradient(135deg, var(--red-600) 0%, #ff4b2f 100%);

  /* --- Тени --- */
  --sh-xs: none;
  --sh-sm: 0 1px 0 rgba(10, 13, 24, .06);
  --sh-md: 0 10px 24px rgba(10, 13, 24, .07);
  --sh-lg: 0 20px 44px rgba(10, 13, 24, .10);
  --sh-brand: 0 12px 32px rgba(0, 19, 127, .22);
  --sh-cta: 0 8px 22px rgba(227, 6, 19, .28);

  /* --- Радиусы --- */
  --r-xs: 0;
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-xl: 0;
  --r-pill: 0;
  --r-round: 999px;   /* только для точек и круглых кнопок */
  --notch: 14px;      /* срез угла у карточек */

  /* --- Типографика ---
     Заголовки — Geologica (кириллица в основе, техничный характер),
     текст — Golos Text, служебные подписи — IBM Plex Mono.
     Цифры табличные, чтобы цены и скорости не «плясали». */
  --font-sans: 'Golos Text', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Geologica', 'Golos Text', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Плавная шкала: min на 360px → max на 1280px. Компактнее прежней
     примерно на 15–18% в крупных кеглях. */
  --fs-xs:   0.75rem;                                     /* 12 */
  --fs-sm:   0.8125rem;                                   /* 13 */
  --fs-base: 0.9375rem;                                   /* 15 */
  --fs-md:   clamp(1rem, 0.96rem + 0.16vw, 1.0625rem);    /* 16 → 17 */
  --fs-lg:   clamp(1.0625rem, 1.01rem + 0.23vw, 1.1875rem);
  --fs-xl:   clamp(1.1875rem, 1.07rem + 0.47vw, 1.4375rem);
  --fs-2xl:  clamp(1.375rem, 1.17rem + 0.86vw, 1.8125rem);
  --fs-3xl:  clamp(1.625rem, 1.3rem + 1.37vw,  2.3125rem);
  --fs-4xl:  clamp(1.9375rem, 1.44rem + 2.08vw, 3rem);

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-base:  1.55;
  --lh-loose: 1.65;

  /* Трекинг для крупного текста — современные гротески любят тугой */
  --ls-display: -0.03em;
  --ls-tight:   -0.015em;
  --ls-caps:    .14em;

  /* --- Ритм / отступы --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 18px;
  --sp-6: 22px;
  --sp-8: 28px;
  --sp-10: 34px;
  --sp-12: 40px;
  --sp-16: 52px;
  --sp-20: 64px;
  --sp-24: 76px;

  /* Вертикальный ритм секций — сжимается на мобильном */
  --section-y: clamp(2.25rem, 1.5rem + 3.1vw, 4rem);
  --gutter:    clamp(1rem, 0.64rem + 1.5vw, 1.75rem);

  --container: 1180px;
  --container-narrow: 780px;

  /* --- Анимация --- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .15s;
  --dur: .25s;
  --dur-slow: .4s;

  --header-h: 58px;
}

@media (min-width: 1024px) {
  :root { --header-h: 72px; }
}

/* =========================================================
   Тёмная тема
   ========================================================= */
/* Тёмная тема НЕ включается автоматически по настройке системы:
   сайт всегда светлый. Включить вручную можно атрибутом
   <html data-theme="dark"> — набор переменных ниже. */

:root[data-theme="dark"] {
  --bg:            #0c1020;
  --bg-soft:       #121830;
  --bg-muted:      #182040;
  --bg-brand:      #0a124a;
  --bg-brand-deep: #060b2e;

  --surface:       #141b36;
  --surface-raised:#1b2344;

  --text:          #eef1fa;
  --text-soft:     #b4bcd6;
  --text-muted:    #8d96b4;
  --text-invert:   #0c1020;
  --text-invert-soft: rgba(255, 255, 255, .72);

  --border:        #28315a;
  --border-soft:   #202846;
  --border-strong: #3a4472;

  --accent:        var(--navy-400);
  --accent-hover:  var(--navy-300);
  --accent-text:   #0c1020;

  --cta:           var(--red-500);
  --cta-hover:     #ff3d48;

  --link:          var(--sky-400);
  --link-hover:    var(--sky-500);

  --icon-bg:       rgba(107, 121, 217, .18);
  --icon-fg:       var(--navy-300);
  --chip-bg:       rgba(107, 121, 217, .2);
  --chip-fg:       var(--navy-200);
  --nav-hover-bg:  rgba(107, 121, 217, .14);
  --table-head-bg: #1b2344;
  --table-head-fg: #eef1fa;
  --row-hover-bg:  rgba(107, 121, 217, .1);

  --grad-brand: linear-gradient(135deg, #060b2e 0%, #141f6b 55%, #1d4e82 130%);
  --grad-brand-soft: linear-gradient(135deg, #141b36 0%, #11243a 100%);

  --sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-sm: 0 2px 6px rgba(0, 0, 0, .45);
  --sh-md: 0 6px 18px rgba(0, 0, 0, .5);
  --sh-lg: 0 16px 40px rgba(0, 0, 0, .55);
  --sh-brand: 0 12px 32px rgba(0, 0, 0, .5);
  --sh-cta: 0 8px 22px rgba(227, 6, 19, .35);
}