/* Дизайн-токены редизайна. Один источник для лендинга и калькулятора —
   значения не должны разъезжаться между страницами.
   Источник: docs/design/redesign-2026-07-26/RoadCalc Redesign.dc.html */

:root {
  --bg: #F1F2FA;
  --surface: #FFFFFF;
  --surface2: #F7F8FD;
  --text: #181633;
  --text2: #6B6A85;
  --border: #E7E7F3;
  --accent: #4F46E5;
  --accent2: #6366F1;
  --soft: #EDEEFE;
  --ink: #4F46E5;
  --side: #141330;
  --side2: #242150;
  --sidetext: #B9B7D6;
  --sidemuted: #7B78A6;
  --pos: #0F9F76;
  --possoft: #E6F7F1;
  --map: #E9EAF4;
  --shadow: 0 2px 14px rgba(24, 22, 51, .06);
  --shadowlg: 0 20px 44px rgba(24, 22, 51, .10);
  --radius: 16px;
  --radius-sm: 10px;
}

:root[data-theme="dark"] {
  --bg: #0F1020;
  --surface: #1A1A2E;
  --surface2: #222340;
  --text: #E9E9F2;
  --text2: #9C9BB8;
  --border: #2C2C48;
  --accent: #6D63EC;
  --accent2: #8B82F5;
  --soft: #252547;
  --ink: #B5ABFC;
  --side: #0A0A16;
  --side2: #211F44;
  --sidetext: #B9B7D6;
  --sidemuted: #7B78A6;
  --pos: #34D399;
  --possoft: #123329;
  --map: #191A2C;
  --shadow: 0 0 0 1px rgba(255, 255, 255, .04);
  --shadowlg: 0 24px 48px rgba(0, 0, 0, .5);
}

/* Мост со старыми именами: вёрстка переписывается посекционно, и до конца
   переноса обе схемы имён должны работать одновременно. */
:root {
  --card: var(--surface);
  --muted: var(--text2);
  --accent-2: var(--accent2);
  --free-road: #94A3B8;
}

* { box-sizing: border-box; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent2); }

input, select, textarea, button { font-family: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgba(99, 102, 241, .24); }

details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] .rc-chev { transform: rotate(180deg); }
.rc-chev { transition: transform .18s; }

/* иконки спрайта: размер от кегля, цвет от текста */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em;
  fill: currentColor; flex: 0 0 auto; }

/* кнопка-иконка (тема, мелкие действия) */
.icon-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text2); font-size: 15px; cursor: pointer;
  padding: 0; }
.icon-btn:hover { color: var(--ink); border-color: var(--accent); }

.leaflet-container { background: var(--map) !important; font-family: inherit; }
.leaflet-control-attribution { font-size: 9px !important; }