/* IoT Explorer — generated from tokens.json */
:root, [data-theme="light"] {
  --bg: #F6F7FB;
  --surface: #FFFFFF;
  --surface-2: #ECEEF6;
  --line: #DDE0EC;
  --line-strong: #8D92AF;
  --ink: #171A33;
  --ink-muted: #585E7E;
  --primary: #454CA0;
  --primary-strong: #353B85;
  --on-primary: #FFFFFF;
  --primary-soft: #EBEDFA;
  --accent: #F16725;
  --accent-strong: #F4844C;
  --on-accent: #171A33;
  --accent-soft: #FFF0E6;
  --accent-text: #B5470E;
  --success: #17724A;
  --success-soft: #E2F4EA;
  --warning: #865900;
  --warning-soft: #FFF4D6;
  --danger: #B3342A;
  --danger-soft: #FDE7E4;
  --focus: #454CA0;
  --logo-plate: #FFFFFF;
  --scrim: rgba(15,18,34,0.55);
  --shadow-1: 0 1px 2px rgba(23,26,51,0.06), 0 2px 8px rgba(23,26,51,0.06);
  --shadow-2: 0 12px 32px rgba(23,26,51,0.16);
}
[data-theme="dark"] {
  --bg: #0F1222;
  --surface: #181C33;
  --surface-2: #1F2440;
  --line: #2E3456;
  --line-strong: #646B92;
  --ink: #E8EAF6;
  --ink-muted: #A2A7C6;
  --primary: #9BA2F0;
  --primary-strong: #B9BEF6;
  --on-primary: #0F1222;
  --primary-soft: #232954;
  --accent: #FF8B52;
  --accent-strong: #FFA071;
  --on-accent: #0F1222;
  --accent-soft: #3A2214;
  --accent-text: #FF8B52;
  --success: #57CF93;
  --success-soft: #12301F;
  --warning: #F2C14E;
  --warning-soft: #33290E;
  --danger: #FF7D70;
  --danger-soft: #3A1B19;
  --focus: #9BA2F0;
  --logo-plate: #FFFFFF;
  --scrim: rgba(0,0,0,0.65);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 12px 32px rgba(0,0,0,0.6);
}
:root {
  --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-16: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --sidebar-w: 248px;
  --header-h: 64px;
  --bottomnav-h: 64px;
  --content-max: 1200px;
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
.display-xl { font-family: var(--font-display); font-size: 44px; line-height: 48px; font-weight: 800; letter-spacing: -0.02em; }
.display { font-family: var(--font-display); font-size: 32px; line-height: 38px; font-weight: 800; letter-spacing: -0.015em; }
.h1 { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 700; }
.h2 { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 700; }
.h3 { font-family: var(--font-display); font-size: 17px; line-height: 24px; font-weight: 700; }
.stat { font-family: var(--font-display); font-size: 30px; line-height: 34px; font-weight: 800; }
.body-lg { font-family: var(--font-body); font-size: 17px; line-height: 27px; font-weight: 400; }
.body { font-family: var(--font-body); font-size: 15px; line-height: 24px; font-weight: 400; }
.body-strong { font-family: var(--font-body); font-size: 15px; line-height: 24px; font-weight: 600; }
.body-sm { font-family: var(--font-body); font-size: 13px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; }
.code { font-family: var(--font-mono); font-size: 14px; line-height: 22px; font-weight: 400; }