/* GENERATED by tools/gen-tokens.mjs from shared/tokens.json — do not edit */

/* 기본은 다크. 야간 주행이 주 사용 환경이다. */
:root {
  --bg-base: #0A0F16;
  --bg-map: #0C1319;
  --bg-sheet: #131C26;
  --bg-card: #16202C;
  --line: #22303F;
  --line-soft: #1E2A37;
  --line-strong: #2B3B4D;
  --handle: #2E3E51;
  --text: #E8EEF5;
  --text-dim: #94A6B8;
  --text-faint: #8496A8;
  --accent: #29C5E8;
  --accent-ink: #04222C;
  --brand-navy: #0F2C59;
  --cat-weigh: #FF9F0A;
  --cat-border: #30D158;
  --cat-port: #8E8CFF;
  --ok: #30D158;
  --warn: #FF9F0A;
  --scrim: rgba(8,12,18,0.62);
  --cat-weigh-bg: rgba(255,159,10,0.16);
  --cat-weigh-halo: rgba(255,159,10,0.1);
  --cat-border-bg: rgba(48,209,88,0.16);
  --cat-border-halo: rgba(48,209,88,0.1);
  --cat-port-bg: rgba(142,140,255,0.16);
  --cat-port-halo: rgba(142,140,255,0.1);
  --accent-halo: rgba(41,197,232,0.1);
  --warn-bg: rgba(255,159,10,0.08);
  --warn-border: rgba(255,159,10,0.28);
  --ok-bg: rgba(48,209,88,0.13);

  --r-chip: 12px;
  --r-card: 14px;
  --r-panel: 16px;
  --r-sheet: 22px;
  --r-sheetCard: 24px;
  --r-badge: 13px;
  --r-pill: 999px;
  --r-button: 16px;
  --r-metaChip: 8px;
  --sp-gutter: 16px;
  --sp-s1: 4px;
  --sp-s2: 8px;
  --sp-s3: 12px;
  --sp-s4: 16px;
  --sp-s5: 20px;
  --sp-s6: 24px;
  --sp-s7: 28px;
  --sp-s8: 32px;
  --sz-touchMin: 44px;
  --sz-searchField: 48px;
  --sz-chip: 44px;
  --sz-iconBtnHeader: 44px;
  --sz-iconBtnMap: 48px;
  --sz-badgeList: 42px;
  --sz-badgeDetail: 46px;
  --sz-badgeMarker: 26px;
  --sz-markerPill: 36px;
  --sz-btnPrimary: 56px;
  --sz-btnSecondary: 52px;
  --sz-handleW: 38px;
  --sz-handleH: 4px;
  --sz-mapStripList: 252px;
  --sz-mapStripDetail: 196px;
  --sz-sidebarLg: 380px;
  --sz-sidebarMd: 320px;
  --font-display: Archivo, 'SF Compact Display', -apple-system, system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --shadow-marker: 0 8px 18px rgba(0,0,0,.5);
  --shadow-sheet: 0 -12px 32px rgba(0,0,0,.35);
  --shadow-toast: 0 10px 30px rgba(0,0,0,.5);
  --motion-sheet: 280ms cubic-bezier(.22,.61,.36,1);
  --motion-fast: 140ms ease-out;
}

:root[data-theme="light"] {
  --bg-base: #F2F4F7;
  --bg-map: #E6EAF0;
  --bg-sheet: #FFFFFF;
  --bg-card: #FFFFFF;
  --line: #D6DEE8;
  --line-soft: #E4EAF1;
  --line-strong: #C3CEDB;
  --handle: #C3CEDB;
  --text: #0B1620;
  --text-dim: #516274;
  --text-faint: #6B7C8E;
  --accent: #00A8CC;
  --accent-ink: #04222C;
  --brand-navy: #0F2C59;
  --cat-weigh: #C76A00;
  --cat-border: #1E8E3E;
  --cat-port: #5E5CE6;
  --ok: #1E8E3E;
  --warn: #C76A00;
  --scrim: rgba(10,15,22,0.35);
  --cat-weigh-bg: rgba(199,106,0,0.16);
  --cat-weigh-halo: rgba(199,106,0,0.1);
  --cat-border-bg: rgba(30,142,62,0.16);
  --cat-border-halo: rgba(30,142,62,0.1);
  --cat-port-bg: rgba(94,92,230,0.16);
  --cat-port-halo: rgba(94,92,230,0.1);
  --accent-halo: rgba(0,168,204,0.1);
  --warn-bg: rgba(199,106,0,0.08);
  --warn-border: rgba(199,106,0,0.28);
  --ok-bg: rgba(30,142,62,0.13);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
  --bg-base: #F2F4F7;
  --bg-map: #E6EAF0;
  --bg-sheet: #FFFFFF;
  --bg-card: #FFFFFF;
  --line: #D6DEE8;
  --line-soft: #E4EAF1;
  --line-strong: #C3CEDB;
  --handle: #C3CEDB;
  --text: #0B1620;
  --text-dim: #516274;
  --text-faint: #6B7C8E;
  --accent: #00A8CC;
  --accent-ink: #04222C;
  --brand-navy: #0F2C59;
  --cat-weigh: #C76A00;
  --cat-border: #1E8E3E;
  --cat-port: #5E5CE6;
  --ok: #1E8E3E;
  --warn: #C76A00;
  --scrim: rgba(10,15,22,0.35);
  --cat-weigh-bg: rgba(199,106,0,0.16);
  --cat-weigh-halo: rgba(199,106,0,0.1);
  --cat-border-bg: rgba(30,142,62,0.16);
  --cat-border-halo: rgba(30,142,62,0.1);
  --cat-port-bg: rgba(94,92,230,0.16);
  --cat-port-halo: rgba(94,92,230,0.1);
  --accent-halo: rgba(0,168,204,0.1);
  --warn-bg: rgba(199,106,0,0.08);
  --warn-border: rgba(199,106,0,0.28);
  --ok-bg: rgba(30,142,62,0.13);
  }
}

/* ---- type scale ---- */
.t-wordmark {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
}
.t-screenTitle {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
}
.t-distanceLg {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
}
.t-distanceMd {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}
.t-detailTitle {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
}
.t-itemTitle {
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
}
.t-itemSub {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-dim);
}
.t-chipLabel {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}
.t-btnLabel {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}
.t-specValue {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}
.t-specLabel {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-dim);
}
.t-caption {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-faint);
}
.t-unit {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-dim);
}
.t-markerLabel {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
}
.t-warnBody {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.45;
}