/* ============================================================
   ТОКЕНЫ. Палитра по сайту musafir-78.ru (ТЗ, раздел 4.2).
   Цвета пишем только здесь. В остальном коде — только переменные.
   ============================================================ */

/* --- Шрифты лежат на нашем хостинге (папка fonts/), а не у Google:
       так быстрее в РФ и не передаём IP посетителей за рубеж.
       Подключены только нужные начертания из ТЗ, раздел 9. --- */
@font-face { font-family: 'Geologica'; font-weight: 200; font-style: normal; font-display: swap;
  src: url("../fonts/geologica-cyrillic-200-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geologica'; font-weight: 200; font-style: normal; font-display: swap;
  src: url("../fonts/geologica-latin-200-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geologica'; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../fonts/geologica-cyrillic-300-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geologica'; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../fonts/geologica-latin-300-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Onest'; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/onest-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/onest-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/onest-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/onest-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/ibm-plex-mono-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


:root {
  /* --- Светлые секции --- */
  --light-top:      #cdd1d6;   /* фон секции, верх */
  --light-bottom:   #bfc4ca;   /* фон секции, низ */
  --panel-top:      #f4f6f8;   /* панель первого экрана, верх */
  --panel-bottom:   #e7eaee;   /* панель первого экрана, низ */

  /* --- Тёмные секции --- */
  --dark-top:       #1a1d22;
  --dark-mid:       #101216;
  --dark-bottom:    #0a0b0e;

  /* --- Текст --- */
  --ink-on-light:   #16181b;   /* 11:1 и выше на светлых секциях */
  --muted-on-light: #3d4147;   /* 5:1 и выше на светлых секциях */
  --ink-on-dark:    #eef0f2;   /* 12:1 и выше на тёмных */
  --muted-on-dark:  #b9bec5;   /* 6:1 и выше на тёмных */

  /* --- Акценты --- */
  --silver:         #ccd2d9;   /* полоски прогресса, активные состояния на тёмном */
  --ivory:          #f4efe6;   /* шторка */

  /* --- Форма: ровно два радиуса --- */
  --radius-big:     22px;      /* панели, карточки, шторка, шапка */
  --radius-small:   12px;      /* кнопки, поля, чипы, варианты ответа */

  /* --- Отступы: только эти значения --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* --- Шрифты: три роли --- */
  --font-display: 'Geologica', system-ui, sans-serif;        /* заголовки и крупные цифры, 200–300 */
  --font-text:    'Onest', system-ui, sans-serif;            /* текст 400, кнопки 500 */
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;  /* метки, суммы, сроки, шаги */

  /* --- Размеры текста --- */
  --t-h1:   clamp(34px, 4.4vw, 66px);
  --t-h2:   clamp(32px, 3.6vw, 54px);
  --t-h3:   24px;
  --t-body: 17px;
  --t-label: 12px;

  /* --- Движение --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: 150ms; --base: 200ms; --slow: 250ms;
}

/* Контекст «светлое»: ставится на светлую секцию или матовую перламутровую карточку */
.ctx-light {
  --ink: var(--ink-on-light);
  --muted: var(--muted-on-light);
  --line: rgba(22, 24, 27, .18);
  --bar: #16181b;
  --track: rgba(22, 24, 27, .12);
  --btn-bg: linear-gradient(180deg, #272a2f, #131417);        /* графитовая кнопка */
  --btn-ink: #eef0f2;
  --btn-rim: rgba(0, 0, 0, .5);
  --btn-hi: rgba(255, 255, 255, .12);
  --btn-shadow: 0 14px 30px rgba(18, 21, 26, .28);
  --btn-hover-bg: linear-gradient(180deg, #33373d, #1a1c20);   /* графит светлеет */
  --btn-ring: rgba(22, 24, 27, .14);
  --btn-shine: rgba(255, 255, 255, .28);
  --glass-bg: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(242, 244, 247, .8));
  --glass-rim: rgba(255, 255, 255, .95);
  --glass-hi: rgba(255, 255, 255, .9);
  --glass-shadow: 0 0 0 1px rgba(22, 24, 27, .06), 0 18px 44px rgba(18, 21, 26, .16);
  --field: rgba(255, 255, 255, .62);
  color: var(--ink);
}

/* Контекст «тёмное»: ставится на тёмную секцию или матовую графитовую карточку */
.ctx-dark {
  --ink: var(--ink-on-dark);
  --muted: var(--muted-on-dark);
  --line: rgba(198, 205, 214, .24);
  --bar: var(--silver);
  --track: rgba(198, 205, 214, .16);
  --btn-bg: linear-gradient(180deg, #f8f9fb, #dde0e5);        /* перламутровая кнопка */
  --btn-ink: #16181b;
  --btn-rim: rgba(255, 255, 255, .7);
  --btn-hi: #ffffff;
  --btn-shadow: 0 16px 34px rgba(0, 0, 0, .4);
  --btn-hover-bg: linear-gradient(180deg, #ffffff, #e8eaee);   /* перламутр становится ярче */
  --btn-ring: rgba(204, 210, 217, .28);
  --btn-shine: rgba(255, 255, 255, .9);
  --glass-bg: linear-gradient(160deg, rgba(66, 72, 80, .66), rgba(32, 36, 41, .8));
  --glass-rim: rgba(198, 205, 214, .3);
  --glass-hi: rgba(255, 255, 255, .07);
  --glass-shadow: 0 18px 44px rgba(0, 0, 0, .38);
  --field: rgba(255, 255, 255, .06);
  color: var(--ink);
}