/* Собрано из tokens.mjs. Руками не править: node apps/robotaxi/tokens.mjs */

:root {
  --color-ink-0: #FFFFFF;
  --color-ink-50: #F8F8F8;
  --color-ink-100: #F2F2F3;
  --color-ink-150: #EAEAEC;
  --color-ink-200: #E0E0E3;
  --color-ink-300: #C9C9CD;
  --color-ink-400: #A3A3A8;
  --color-ink-500: #7E7E84;
  --color-ink-600: #5D5D62;
  --color-ink-700: #404044;
  --color-ink-800: #2B2B2E;
  --color-ink-900: #1C1C1E;
  --color-ink-950: #111112;
  --color-yellow-100: #FFF7C7;
  --color-yellow-200: #FFEE85;
  --color-yellow-500: #FCE000;
  --color-yellow-600: #F2D100;
  --color-yellow-900: #3A3400;
  --color-green-100: #E2F5E8;
  --color-green-400: #3DC271;
  --color-green-500: #21A453;
  --color-green-900: #0E3A20;
  --color-amber-500: #FF9F0A;
  --color-blue-100: #E3EDFF;
  --color-blue-400: #5C95FF;
  --color-blue-500: #3478F6;
  --color-blue-900: #10254D;
  --color-red-100: #FFE7E5;
  --color-red-300: #FF9C94;
  --color-red-400: #FF6B61;
  --color-red-500: #F2453D;
  --color-red-600: #E0322A;
  --color-red-900: #4A1512;
  --color-map-ground: #F1EFEA;
  --color-map-block: #FAF9F6;
  --color-map-building: #E8E6E0;
  --color-map-road: #FFFFFF;
  --color-map-edge: #DFDCD4;
  --color-map-park: #DCEFD2;
  --color-map-water: #CCE2F4;
  --color-night-ground: #15181D;
  --color-night-block: #1C2026;
  --color-night-building: #242930;
  --color-night-road: #313840;
  --color-night-edge: #0E1115;
  --color-night-park: #1A2A21;
  --color-night-water: #13253A;
  --color-alpha-ink-06: rgba(17, 17, 18, 0.06);
  --color-alpha-ink-10: rgba(17, 17, 18, 0.10);
  --color-alpha-ink-32: rgba(17, 17, 18, 0.32);
  --color-alpha-ink-80: rgba(28, 28, 30, 0.80);
  --color-alpha-black-60: rgba(0, 0, 0, 0.60);
  --color-alpha-white-08: rgba(255, 255, 255, 0.08);
  --color-alpha-white-88: rgba(255, 255, 255, 0.88);
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-half: 2px;
  --size-10: 10px;
  --size-20: 20px;
  --size-24: 24px;
  --size-28: 28px;
  --size-32: 32px;
  --size-36: 36px;
  --size-44: 44px;
  --size-48: 48px;
  --size-56: 56px;
  --size-64: 64px;
  --size-72: 72px;
  --size-88: 88px;
  --radius-xs: 6px;
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --border-hair: 0.5px;
  --border-thin: 1px;
  --border-thick: 2px;
  --opacity-disabled: 0.4;
  --opacity-muted: 0.64;
  --font-family-text: -apple-system, 'SF Pro Text', Inter, system-ui, sans-serif;
  --font-family-mono: 'SF Mono', ui-monospace, Menlo, 'Cascadia Mono', Consolas, 'Roboto Mono', monospace;
  --font-size-11: 11px;
  --font-size-13: 13px;
  --font-size-15: 15px;
  --font-size-17: 17px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-34: 34px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --font-line-height-tight: 1.1;
  --font-line-height-snug: 1.25;
  --font-line-height-normal: 1.4;
  --shadow-1: 0 1px 2px 0 var(--color-alpha-ink-06), 0 4px 12px 0 var(--color-alpha-ink-10);
  --shadow-2: 0 8px 24px 0 var(--color-alpha-ink-10);
  --shadow-3: 0 -4px 24px 0 var(--color-alpha-ink-10);
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-emphasized: cubic-bezier(0.2, 0.9, 0.1, 1);
}

:root,
[data-mode='light'] {
  --bg-canvas: var(--color-ink-100);
  --bg-surface: var(--color-ink-0);
  --bg-raised: var(--color-ink-0);
  --bg-sunken: var(--color-ink-100);
  --bg-pressed: var(--color-ink-200);
  --bg-inverse: var(--color-ink-950);
  --text-primary: var(--color-ink-950);
  --text-secondary: var(--color-ink-500);
  --text-tertiary: var(--color-ink-400);
  --text-inverse: var(--color-ink-0);
  --line-hair: var(--color-ink-150);
  --line-strong: var(--color-ink-300);
  --accent-brand: var(--color-yellow-500);
  --accent-brand-pressed: var(--color-yellow-600);
  --accent-brand-soft: var(--color-yellow-100);
  --accent-on-brand: var(--color-ink-950);
  --action-primary: var(--color-yellow-500);
  --action-primary-pressed: var(--color-yellow-600);
  --action-on-primary: var(--color-ink-950);
  --action-secondary: var(--color-ink-100);
  --action-secondary-pressed: var(--color-ink-200);
  --action-on-secondary: var(--color-ink-950);
  --action-inverse: var(--color-ink-950);
  --action-on-inverse: var(--color-ink-0);
  --status-success: var(--color-green-500);
  --status-success-soft: var(--color-green-100);
  --status-info: var(--color-blue-500);
  --status-info-soft: var(--color-blue-100);
  --status-warning-soft: var(--color-yellow-100);
  --status-danger: var(--color-red-500);
  --status-danger-soft: var(--color-red-100);
  --status-danger-text: var(--color-red-600);
  --overlay-scrim: var(--color-alpha-ink-32);
  --overlay-glass: var(--color-alpha-white-88);
  --map-ground: var(--color-map-ground);
  --map-block: var(--color-map-block);
  --map-building: var(--color-map-building);
  --map-road: var(--color-map-road);
  --map-edge: var(--color-map-edge);
  --map-park: var(--color-map-park);
  --map-water: var(--color-map-water);
  --map-route: var(--color-green-500);
  --map-traffic: var(--color-amber-500);
  --map-zone: var(--color-ink-600);
  --map-outside: var(--color-alpha-ink-06);
}

/* Тёмный режим только по явному data-mode: по системной теме приложение не
   темнеет, см. tokens.mjs. */
[data-mode='dark'] {
  --bg-canvas: var(--color-ink-950);
  --bg-surface: var(--color-ink-900);
  --bg-raised: var(--color-ink-800);
  --bg-sunken: var(--color-ink-800);
  --bg-pressed: var(--color-ink-700);
  --bg-inverse: var(--color-ink-50);
  --text-primary: var(--color-ink-50);
  --text-secondary: var(--color-ink-400);
  --text-tertiary: var(--color-ink-600);
  --text-inverse: var(--color-ink-950);
  --line-hair: var(--color-ink-700);
  --line-strong: var(--color-ink-600);
  --accent-brand: var(--color-yellow-500);
  --accent-brand-pressed: var(--color-yellow-600);
  --accent-brand-soft: var(--color-yellow-900);
  --accent-on-brand: var(--color-ink-950);
  --action-primary: var(--color-yellow-500);
  --action-primary-pressed: var(--color-yellow-600);
  --action-on-primary: var(--color-ink-950);
  --action-secondary: var(--color-ink-800);
  --action-secondary-pressed: var(--color-ink-700);
  --action-on-secondary: var(--color-ink-50);
  --action-inverse: var(--color-ink-50);
  --action-on-inverse: var(--color-ink-950);
  --status-success: var(--color-green-400);
  --status-success-soft: var(--color-green-900);
  --status-info: var(--color-blue-400);
  --status-info-soft: var(--color-blue-900);
  --status-warning-soft: var(--color-yellow-900);
  --status-danger: var(--color-red-400);
  --status-danger-soft: var(--color-red-900);
  --status-danger-text: var(--color-red-300);
  --overlay-scrim: var(--color-alpha-black-60);
  --overlay-glass: var(--color-alpha-ink-80);
  --map-ground: var(--color-night-ground);
  --map-block: var(--color-night-block);
  --map-building: var(--color-night-building);
  --map-road: var(--color-night-road);
  --map-edge: var(--color-night-edge);
  --map-park: var(--color-night-park);
  --map-water: var(--color-night-water);
  --map-route: var(--color-green-400);
  --map-traffic: var(--color-amber-500);
  --map-zone: var(--color-ink-300);
  --map-outside: var(--color-alpha-white-08);
}

/* Компонентный слой объявлен на каждом корне режима: переменная со ссылкой
   вычисляется там, где объявлена, и без этого островок тёмного режима
   получил бы кнопки со светлыми значениями. */
:root,
[data-mode] {
  --button-height-l: var(--size-56);
  --button-height-m: var(--size-44);
  --button-height-s: var(--size-32);
  --button-padding-x-l: var(--space-6);
  --button-padding-x-m: var(--space-5);
  --button-padding-x-s: var(--space-3);
  --button-font-size-l: var(--font-size-17);
  --button-font-size-m: var(--font-size-15);
  --button-font-size-s: var(--font-size-13);
  --button-gap: var(--space-2);
  --button-radius: var(--radius-l);
  --icon-button-size: var(--size-44);
  --icon-button-radius: var(--radius-full);
  --icon-button-bg: var(--bg-raised);
  --icon-button-shadow: var(--shadow-1);
  --sheet-radius: var(--radius-xl);
  --sheet-padding-x: var(--space-4);
  --sheet-padding-top: var(--space-2);
  --sheet-gap: var(--space-4);
  --sheet-bg: var(--bg-surface);
  --sheet-shadow: var(--shadow-3);
  --sheet-grabber-width: var(--size-36);
  --sheet-grabber-height: var(--space-1);
  --sheet-grabber-color: var(--line-strong);
  --cell-min-height: var(--size-56);
  --cell-padding-x: var(--space-4);
  --cell-padding-y: var(--space-2);
  --cell-gap: var(--space-3);
  --cell-lead-size: var(--size-36);
  --cell-lead-radius: var(--radius-s);
  --field-height: var(--size-48);
  --field-radius: var(--radius-m);
  --field-padding-x: var(--space-4);
  --field-gap: var(--space-3);
  --field-bg: var(--bg-sunken);
  --route-radius: var(--radius-xl);
  --route-padding: var(--space-1);
  --route-row-height: var(--size-56);
  --route-icon-size: var(--size-32);
  --route-bg: var(--bg-surface);
  --route-shadow: var(--shadow-2);
  --chip-height: var(--size-36);
  --chip-padding-x: var(--space-4);
  --chip-radius: var(--radius-full);
  --chip-bg: var(--bg-sunken);
  --chip-bg-on: var(--accent-brand);
  --chip-text-on: var(--accent-on-brand);
  --card-radius: var(--radius-l);
  --card-padding: var(--space-4);
  --card-gap: var(--space-3);
  --card-bg: var(--bg-sunken);
  --tariff-width: var(--size-88);
  --tariff-padding: var(--space-2);
  --tariff-gap: var(--space-half);
  --tariff-radius: var(--radius-l);
  --tariff-bg-on: var(--bg-sunken);
  --action-height: var(--size-44);
  --action-padding-x: var(--space-4);
  --action-gap: var(--space-2);
  --action-radius: var(--radius-m);
  --action-bg: var(--bg-sunken);
  --round-size: var(--size-56);
  --round-gap: var(--space-2);
  --round-bg: var(--bg-sunken);
  --banner-padding: var(--space-3);
  --banner-gap: var(--space-3);
  --banner-radius: var(--radius-m);
  --code-size: var(--size-44);
  --code-radius: var(--radius-s);
  --code-font-size: var(--font-size-17);
  --code-bg: var(--accent-brand);
  --code-text: var(--accent-on-brand);
  --plate-height: var(--size-36);
  --plate-radius: var(--radius-xs);
  --plate-padding-x: var(--space-2);
  --plate-ring-width: var(--border-thick);
  --plate-font-size: var(--font-size-20);
  --pin-size: var(--size-32);
  --pin-radius: var(--radius-s);
  --pin-bg: var(--accent-brand);
  --pin-text: var(--accent-on-brand);
  --progress-height: var(--space-1);
  --progress-track: var(--bg-sunken);
  --progress-fill: var(--accent-brand);
  --star-size: var(--size-48);
  --star-on: var(--accent-brand);
  --star-off: var(--line-hair);
}

.t-display {
  font-family: var(--font-family-text);
  font-size: var(--font-size-34);
  font-weight: var(--font-weight-heavy);
  line-height: var(--font-line-height-tight);
  margin: 0;
}
.t-title-l {
  font-family: var(--font-family-text);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-tight);
  margin: 0;
}
.t-title-m {
  font-family: var(--font-family-text);
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-snug);
  margin: 0;
}
.t-title-s {
  font-family: var(--font-family-text);
  font-size: var(--font-size-17);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-snug);
  margin: 0;
}
.t-body {
  font-family: var(--font-family-text);
  font-size: var(--font-size-17);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-snug);
  margin: 0;
}
.t-body-s {
  font-family: var(--font-family-text);
  font-size: var(--font-size-15);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-snug);
  margin: 0;
}
.t-caption {
  font-family: var(--font-family-text);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-snug);
  margin: 0;
}
.t-micro {
  font-family: var(--font-family-text);
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-tight);
  margin: 0;
}
.t-numeric {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-17);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-tight);
  margin: 0;
}

.gap-0 { gap: var(--space-0); }
.p-0 { padding: var(--space-0); }
.px-0 { padding-inline: var(--space-0); }
.py-0 { padding-block: var(--space-0); }
.gap-1 { gap: var(--space-1); }
.p-1 { padding: var(--space-1); }
.px-1 { padding-inline: var(--space-1); }
.py-1 { padding-block: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.p-2 { padding: var(--space-2); }
.px-2 { padding-inline: var(--space-2); }
.py-2 { padding-block: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.p-3 { padding: var(--space-3); }
.px-3 { padding-inline: var(--space-3); }
.py-3 { padding-block: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.p-4 { padding: var(--space-4); }
.px-4 { padding-inline: var(--space-4); }
.py-4 { padding-block: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.p-5 { padding: var(--space-5); }
.px-5 { padding-inline: var(--space-5); }
.py-5 { padding-block: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.p-6 { padding: var(--space-6); }
.px-6 { padding-inline: var(--space-6); }
.py-6 { padding-block: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.p-8 { padding: var(--space-8); }
.px-8 { padding-inline: var(--space-8); }
.py-8 { padding-block: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.p-10 { padding: var(--space-10); }
.px-10 { padding-inline: var(--space-10); }
.py-10 { padding-block: var(--space-10); }
.gap-12 { gap: var(--space-12); }
.p-12 { padding: var(--space-12); }
.px-12 { padding-inline: var(--space-12); }
.py-12 { padding-block: var(--space-12); }
.gap-half { gap: var(--space-half); }
.p-half { padding: var(--space-half); }
.px-half { padding-inline: var(--space-half); }
.py-half { padding-block: var(--space-half); }