/* ==========================================================================
   Design tokens · доставка-дизельного-топлива-рейтинг.рф
   Светлая тема: белый, голубой, зелёный + ретро-акценты заправки 50–60-х
   ========================================================================== */
:root {
  /* --- Шрифты --- */
  --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Нейтральные --- */
  --c-white: #FFFFFF;
  --c-paper: #F7FAFD;       /* фон страницы */
  --c-mist: #EEF4FA;        /* второстепенные блоки */
  --c-line: #D9E3EE;        /* границы */
  --c-line-strong: #B9C8D8;
  --c-ink: #0A1A2B;         /* основной текст, контраст 16.9:1 на белом */
  --c-ink-2: #2C3E52;       /* вторичный текст, 10.6:1 */
  --c-ink-3: #4B5D71;       /* подписи, 6.9:1 — минимум для мелкого текста */

  /* --- Голубой (основной) --- */
  --c-blue-50: #EAF4FF;
  --c-blue-100: #D3E8FF;
  --c-blue-200: #A9D1FF;
  --c-blue-400: #3D95F5;
  --c-blue-600: #0B63CE;    /* ссылки/кнопки, 5.6:1 на белом */
  --c-blue-700: #0A4FA6;    /* hover, 7.9:1 */
  --c-blue-900: #0A2A55;

  /* --- Зелёный (второй акцент, «чистое топливо/К5») --- */
  --c-green-50: #E6F7EF;
  --c-green-100: #C8EEDB;
  --c-green-300: #6FD3A4;
  --c-green-600: #0B7F4F;   /* 5.3:1 на белом */
  --c-green-700: #08663F;
  --c-green-900: #06381F;

  /* --- Бирюза (вода/переход) --- */
  --c-teal-50: #E4F8F8;
  --c-teal-500: #13A3A8;
  --c-teal-700: #0B6E72;

  /* --- Ретро-акценты заправки 50–60-х (дозированно) --- */
  --c-retro-cream: #FFF6E4;
  --c-retro-sun: #FFC23D;   /* только фоном под тёмным текстом */
  --c-retro-cherry: #C8322A;/* 5.9:1 на белом */
  --c-retro-mint: #BFEBDD;
  --c-retro-chrome: linear-gradient(180deg,#FFFFFF 0%,#DDE6EF 45%,#AFBFCF 55%,#EEF3F8 100%);

  /* --- Статусы --- */
  --c-ok: var(--c-green-600);
  --c-warn: #9A5B00;        /* 5.4:1 на белом */
  --c-warn-bg: #FFF2D6;
  --c-bad: var(--c-retro-cherry);
  --c-bad-bg: #FDE9E7;

  /* --- Типографическая шкала (крупнее обычного, fluid) --- */
  --fs-12: clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);   /* 13–14 */
  --fs-14: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);        /* 15–16 */
  --fs-16: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);   /* 17–19 базовый */
  --fs-18: clamp(1.1875rem, 1.12rem + 0.3vw, 1.3125rem);   /* 19–21 */
  --fs-20: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem);       /* 21–24 */
  --fs-24: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);            /* 24–32 */
  --fs-32: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);       /* 30–44 */
  --fs-40: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);        /* 34–56 */
  --fs-56: clamp(2.5rem, 1.7rem + 3.8vw, 5rem);            /* 40–80 */
  --fs-80: clamp(3rem, 1.8rem + 6vw, 7.5rem);              /* 48–120 */

  --lh-tight: 1.08;
  --lh-head: 1.18;
  --lh-body: 1.6;

  /* --- Отступы --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --gutter: clamp(16px, 3.2vw, 56px);
  --section-gap: clamp(12px, 1.6vw, 20px);   /* зазор между «плитками» как у Яндекса */
  --block-pad: clamp(24px, 4.4vw, 64px);

  /* --- Радиусы (крупные, «плиточные») --- */
  --r-xs: 8px; --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px;
  --r-block: clamp(24px, 3vw, 44px);

  /* --- Тени --- */
  --sh-1: 0 1px 2px rgba(10,26,43,.06), 0 1px 1px rgba(10,26,43,.04);
  --sh-2: 0 6px 18px -6px rgba(10,42,85,.14), 0 2px 4px rgba(10,42,85,.06);
  --sh-3: 0 24px 60px -20px rgba(10,42,85,.28), 0 6px 14px -6px rgba(10,42,85,.10);
  --sh-focus: 0 0 0 3px #fff, 0 0 0 6px var(--c-blue-600);

  /* --- Сетка --- */
  --container: 1920px;           /* «fluid»: на ПК почти во всю ширину */
  --container-narrow: 980px;

  /* --- Движение --- */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: .18s; --t-med: .38s; --t-slow: .8s;

  /* --- Слои --- */
  --z-bg: 0; --z-base: 1; --z-sticky: 50; --z-nav: 80; --z-tooltip: 120; --z-modal: 200; --z-fx: 300;
}

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