/* Motorhome Energy — generated from tokens.json */
:root, [data-theme="light"] {
  --navy-950: #081526;
  --navy-900: #0F2238;
  --navy-800: #1A3352;
  --navy-200: #A9BBD0;
  --on-navy: #F3F7FB;
  --teal-700: #06625C;
  --teal-600: #0A7A72;
  --teal-500: #12A096;
  --teal-300: #6FD0C6;
  --teal-100: #CDEFEB;
  --teal-50: #EBF8F6;
  --on-teal: #FFFFFF;
  --bg: #F3F5F8;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --surface-3: #EDF1F5;
  --border: #E1E6ED;
  --border-strong: #818C9C;
  --ink: #0E1B2B;
  --ink-2: #3F4D5E;
  --ink-3: #566375;
  --ink-disabled: #9AA5B2;
  --ok-700: #13703A;
  --ok-500: #1F9D55;
  --ok-50: #E6F5EC;
  --warn-700: #8F5200;
  --warn-500: #E8960C;
  --warn-50: #FFF3DC;
  --crit-700: #B42318;
  --crit-500: #D92D20;
  --crit-50: #FDECEA;
  --neutral-700: #4A5567;
  --neutral-400: #8B96A5;
  --neutral-50: #EDF0F4;
  --info-700: #1D4FA6;
  --info-500: #2F6FDB;
  --info-50: #EAF1FD;
  --series-1: #0A7A72;
  --series-2: #3B62C4;
  --series-3: #B0477F;
  --series-4: #B97806;
  --map-land: #EEF1EC;
  --map-water: #D5E6F0;
  --map-road: #FFFFFF;
  --map-road-major: #E3D6BC;
  --map-park: #DDEADB;
  --scrim: rgba(8, 21, 38, 0.48);
  --shadow-1: 0 1px 2px rgba(14, 27, 43, 0.06);
  --shadow-2: 0 4px 12px rgba(14, 27, 43, 0.08), 0 1px 3px rgba(14, 27, 43, 0.06);
  --shadow-3: 0 16px 40px rgba(14, 27, 43, 0.18);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --z-sticky: 10;
  --z-drawer: 40;
  --z-modal: 50;
  --z-toast: 60;
  --font-sans: "Noto Sans Thai", "Noto Sans", "Sarabun", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Noto Sans Mono", ui-monospace, monospace;
}
.display { font-family: var(--font-sans); font-size: 32px; line-height: 44px; font-weight: 600; letter-spacing: -0.01em; }
.h1 { font-family: var(--font-sans); font-size: 24px; line-height: 34px; font-weight: 600; }
.h2 { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 600; }
.h3 { font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 600; }
.body-lg { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 600; }
.small { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 18px; font-weight: 500; }
.metric-xl { font-family: var(--font-sans); font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; }
.metric { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 600; }
.metric-sm { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 600; }
.mono { font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-weight: 500; }