/* TwinCard — токены. База: MegaFon Design System (@megafon/ui-core 9.9.0, ui.megafon.ru).
   Значения скопированы из styles/colors.css и colorsDark.css пакета — не подобраны на глаз.
   Фиолетовый бренд-цвет МегаФона намеренно НЕ используется (решение Юли). */

@font-face { font-family: "Graphik LC"; src: url("./fonts/GraphikLC-Regular.ttf")  format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Graphik LC"; src: url("./fonts/GraphikLC-Medium.ttf")   format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Graphik LC"; src: url("./fonts/GraphikLC-Semibold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Graphik LC"; src: url("./fonts/GraphikLC-Bold.ttf")     format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* --- Basic --- */
  --brandGreen: #00B956;
  --base:       #FFFFFF;
  --content:    #333333;
  --spbSky0:    #F2F4F7;
  --spbSky1:    #E8EAEE;
  --spbSky2:    #D2D5DA;
  --spbSky3:    #8F96A4;
  --spbSky4:    #616C82;

  /* --- System --- */
  --fury:        #F62434;   /* ошибка */
  --137C:        #FFA717;   /* внимание / focus-ring */
  --systemBlue:  #34AAF2;   /* ссылки по умолчанию */
  --background:  #FFFFFF;
  --backgroundGray: #F2F4F7;
  --buttonHoverGreen: #10E272;
  --buttonDown:  #404D46;
  --overlay:     #000000CC;

  /* --- Soft (пары к основным) --- */
  --brandGreen80: #0CDC78;
  --brandGreen20: #DDFFEC;
  --fury80: #F8505D;
  --fury20: #FFC5C9;

  /* --- Static (не зависят от темы) --- */
  --stcWhite: #FFFFFF;
  --stcBlack: #333333;
  --stcBlack5:  #0A255C0D;
  --stcBlack10: #172A4F1A;
  --stcWhite20: #FFFFFF33;

  /* --- Шрифт --- */
  --font: "Graphik LC", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Радиусы (Tile/Button/TextField МегаФона) --- */
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 30px;

  /* --- Отступы: шаг 4, опорные — гаттеры сетки МегаФона (16/20/32) --- */
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px;
  --sp-24: 24px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px;

  /* --- Компонентные токены: сегмент-контрол (табы) --- */
  --comp-tabs-track: var(--spbSky0);        /* #F2F4F7 */
  --comp-tabs-pill: var(--base);            /* #FFFFFF — активная выше трека по светлоте */
  --comp-tabs-pill-shadow: 0 2px 8px rgba(0,0,0,.16);
  --comp-tabs-label: var(--spbSky4);        /* неактивная подпись */

  /* --- Тени Tile --- */
  --sh-default: 0 2px 12px rgba(0,0,0,.10);
  --sh-hover:   0 8px 28px rgba(0,0,0,.10);
  --sh-pressed: 0 2px 8px  rgba(0,0,0,.16);
}

/* Тёмная тема: значения из colorsDark.css МегаФона.
   Селектор без :root — тему можно повесить на любой контейнер
   (нужно, чтобы показать обе темы на одной странице). */
[data-theme="dark"] {
  --base:       #2E3138;
  --content:    #FFFFFF;
  --spbSky0:    #373B42;
  --spbSky1:    #3F434C;
  --spbSky2:    #505560;
  --spbSky3:    #8A909B;
  --spbSky4:    #ADB4C2;
  --background: #1C1E22;
  --backgroundGray: #1C1E22;
  --brandGreen80: #24804E;
  --brandGreen20: #314138;
  --fury80: #CA3A43;
  --fury20: #442B2D;
  --sh-default: 0 2px 12px rgba(0,0,0,.16);
  --sh-hover:   0 8px 28px rgba(0,0,0,.16);

  /* Табы в тёмной: трек — тёмная «канавка», активная — светлее трека.
     У МегаФона в тёмной теме pill (--base #2E3138) темнее трека (--spbSky0 #373B42) — 1.16,
     то есть подложка тонет. Здесь пара перевёрнута: 1.74. Оба цвета — токены МегаФона. */
  --comp-tabs-track: var(--base);           /* #2E3138 */
  --comp-tabs-pill: var(--spbSky2);         /* #505560 */
  --comp-tabs-pill-shadow: none;            /* в тёмной глубина светлотой, не тенью */
  --comp-tabs-label: var(--spbSky4);        /* #ADB4C2 */
}

/* --- Типографика. Мобильная колонка (320px) шкалы МегаФона --- */
.t-h1        { font-size: 30px; line-height: 36px; font-weight: 700; }
.t-h2        { font-size: 22px; line-height: 28px; font-weight: 600; }
.t-h3        { font-size: 18px; line-height: 24px; font-weight: 500; }
.t-h5        { font-size: 15px; line-height: 24px; font-weight: 500; }
.t-p         { font-size: 15px; line-height: 24px; font-weight: 400; }
.t-p-tight   { font-size: 15px; line-height: 18px; font-weight: 400; }
.t-small     { font-size: 12px; line-height: 18px; font-weight: 400; }
.t-small-med { font-size: 12px; line-height: 18px; font-weight: 500; }
.t-small-tight { font-size: 12px; line-height: 14px; font-weight: 400; }