/* ChargeViz tokens.css (from the webapp, comments stripped). */
:root {
  --gray-0:   #FFFFFF;
  --gray-25:  #FCFCFD;
  --gray-50:  #F6F8FA;
  --gray-100: #EEF1F6;
  --gray-200: #E1E6EE;
  --gray-300: #CBD3E0;
  --gray-400: #98A2B3;
  --gray-500: #6B7688;
  --gray-600: #48546B;
  --gray-700: #333F54;
  --gray-800: #1D2A40;
  --gray-900: #0A2540;
  --cyan-50:  #E6FBFF;
  --cyan-100: #C2F5FF;
  --cyan-200: #8CEBFF;
  --cyan-300: #4EDDFF;
  --cyan-400: #1AD3FF;
  --cyan-500: #00D4FF;
  --cyan-600: #00A6CC;
  --cyan-700: #0E7490;
  --cyan-800: #155E75;
  --navy-600: #1B4066;
  --navy-700: #12324F;
  --navy-800: #0A2540;
  --navy-900: #061829;
  --green-50:  #E3FBE9;
  --green-500: #00D924;
  --green-600: #00B01E;
  --green-700: #0A7D2C;
  --yellow-50:  #FFF7E0;
  --yellow-500: #FFCC48;
  --yellow-700: #8A6100;
  --rose-50:  #FEE9F1;
  --rose-500: #FA4B8B;
  --rose-600: #D62E6E;
  --rose-700: #B01E58;
  --color-bg:              var(--gray-25);
  --color-surface:         var(--gray-0);
  --color-surface-subtle:  var(--gray-50);
  --color-surface-sunken:  var(--gray-100);
  --color-border:          var(--gray-200);
  --color-border-strong:   var(--gray-300);
  --color-border-focus:    var(--cyan-500);
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-500);
  --text-disabled:  var(--gray-400);
  --text-on-navy:   var(--gray-0);
  --text-on-cyan:   var(--gray-900);
  --text-link:      var(--cyan-700);
  --text-link-hover:var(--cyan-800);
  --color-primary:        var(--navy-800);
  --color-primary-hover:  var(--navy-600);
  --color-primary-text:   var(--gray-0);
  --color-accent:         var(--cyan-500);
  --color-accent-soft:    var(--cyan-50);
  --color-positive:      var(--green-700);  --color-positive-bg: var(--green-50);  --color-positive-dot: var(--green-500);
  --color-warning:       var(--yellow-700); --color-warning-bg:  var(--yellow-50); --color-warning-dot:  var(--yellow-500);
  --color-negative:      var(--rose-700);   --color-negative-bg: var(--rose-50);   --color-negative-dot: var(--rose-500);
  --color-neutral:       var(--gray-600);   --color-neutral-bg:  var(--gray-100);  --color-neutral-dot:  var(--gray-400);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--cyan-500) 45%, transparent);
  --color-overlay: color-mix(in srgb, var(--navy-800) 22%, transparent);
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: .75rem; --text-sm: .8125rem; --text-base: .875rem; --text-md: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem;
  --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --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; --space-20: 80px;
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;
  --shadow-xs: 0 1px 2px rgba(10,37,64,.06);
  --shadow-sm: 0 1px 3px rgba(10,37,64,.08), 0 1px 2px rgba(10,37,64,.04);
  --shadow-md: 0 4px 12px rgba(10,37,64,.10);
  --shadow-lg: 0 12px 32px rgba(10,37,64,.14);
  --ease-out: cubic-bezier(.2,.8,.2,1); --ease-in-out: cubic-bezier(.4,0,.2,1);
  --dur-fast: 120ms; --dur: 180ms; --dur-slow: 260ms;
  --z-base:0; --z-sticky:100; --z-dropdown:1000; --z-modal:2000; --z-toast:3000;
  --sidebar-w: 240px; --sidebar-w-collapsed: 64px;
  --topbar-h: 56px; --banner-h: 44px; --rail-w: 360px;
  --content-max: 1280px; --content-pad: var(--space-8);
  --modal-pad: var(--space-8);
  --map-chrome-w: 340px; --map-slot-w: 200px; --drawer-peek-h: var(--space-10);
  --chart-1: var(--cyan-500);
  --chart-2: var(--rose-500);
  --chart-3: var(--green-500);
  --chart-4: var(--yellow-500);
  --chart-5: var(--navy-600);
  --seq-1: var(--cyan-50);  --seq-2: var(--cyan-200); --seq-3: var(--cyan-500);
  --seq-4: var(--cyan-700); --seq-5: var(--navy-800);
  --div-low: var(--rose-500); --div-mid: var(--gray-200); --div-high: var(--cyan-500);
  --chart-positive: var(--green-500); --chart-negative: var(--rose-500); --chart-neutral: var(--gray-300);
  --chart-axis: var(--gray-500); --chart-gridline: var(--gray-100);
  --chart-label: var(--text-muted); --chart-tooltip-bg: var(--navy-800);
}
:root[data-theme="dark"] {
  --color-bg:             var(--navy-900);
  --color-surface:        #0C233B;
  --color-surface-subtle: #12314C;
  --color-surface-sunken: #0A1E33;
  --color-border:         #1E3A57;
  --color-border-strong:  #2C4A69;
  --text-primary:   #EAF1F8;
  --text-secondary: #A7B7C9;
  --text-muted:     #7C90A6;
  --text-disabled:  #566780;
  --text-link:      var(--cyan-400);
  --color-primary:       var(--cyan-500);
  --color-primary-hover: var(--cyan-400);
  --color-primary-text:  var(--navy-900);
  --color-accent-soft:   color-mix(in srgb, var(--cyan-500) 16%, transparent);
  --color-overlay: color-mix(in srgb, #000 45%, transparent);
  --color-positive: var(--green-500); --color-positive-bg: color-mix(in srgb, var(--green-500) 16%, transparent);
  --color-warning:  var(--yellow-500);--color-warning-bg:  color-mix(in srgb, var(--yellow-500) 16%, transparent);
  --color-negative: var(--rose-500);  --color-negative-bg: color-mix(in srgb, var(--rose-500) 16%, transparent);
  --chart-gridline: #16304a; --chart-axis: #7C90A6; --chart-tooltip-bg: #0A1E33;
}