/* EcomHub tokens. Generated from the design system tokens.json, do not edit by hand. */
:root {
  color-scheme: dark;
  --bg-000: #15171a;
  --bg-100: #1a1c20;
  --surface-100: #22252a;
  --surface-200: #292c32;
  --surface-300: #30343b;
  --line-100: #2d3036;
  --line-200: #393d44;
  --line-control: #7a818b;
  --ink-100: #e6e8eb;
  --ink-200: #b4bac2;
  --ink-300: #9ea5ae;
  --nav-bg: #15171a;
  --nav-hover: #22252a;
  --nav-line: #2d3036;
  --nav-ink: #e6e8eb;
  --nav-ink-muted: #9ea5ae;
  --nav-active-bg: #c5f04a24;
  --nav-active-ink: #c5f04a;
  --volt: #c8ff2e;
  --on-volt: #15180a;
  --accent: #c5f04a;
  --on-accent: #15180a;
  --accent-hover: #d4f772;
  --accent-text: #c5f04a;
  --accent-soft: #c5f04a1f;
  --ion: #72c4ff;
  --ion-soft: #72c4ff1f;
  --positive: #52e0bf;
  --positive-soft: #52e0bf1f;
  --negative: #ff9a6e;
  --negative-soft: #ff9a6e1f;
  --warning: #ffcb57;
  --warning-soft: #ffcb571f;
  --mod-ads: #72c4ff;
  --mod-creative: #ff7ad9;
  --mod-sales: #c5f04a;
  --mod-finance: #ffcb57;
  --mod-ops: #a597ff;
  --chart-1: #58b6f5;
  --chart-2: #a8d93a;
  --chart-3: #f06cca;
  --chart-4: #eda63a;
  --chart-5: #9a8cf7;
  --chart-6: #36c6a7;
  --shadow-pop: 0 12px 32px rgba(0,0,0,0.45);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-modal: 0 24px 80px rgba(0,0,0,0.75);
  --glow-accent: 0 0 0 1px rgba(197,240,74,0.35), 0 8px 28px rgba(197,240,74,0.10);
  --focus-ring: 0 0 0 2px #1a1c20, 0 0 0 4px #c5f04a;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-display: var(--font-sans);
  --space-half: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --size-control-sm: 28px;
  --size-control-md: 34px;
  --size-control-lg: 42px;
  --size-sidebar: 236px;
  --size-topbar: 52px;
  --z-sticky: 10;
  --z-pop: 40;
  --z-modal: 60;
  --z-toast: 70;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg-000: #e8e5de;
  --bg-100: #f3f1ec;
  --surface-100: #ffffff;
  --surface-200: #f8f6f2;
  --surface-300: #efece6;
  --line-100: #e7e3db;
  --line-200: #d9d4ca;
  --line-control: #837e74;
  --ink-100: #17181b;
  --ink-200: #45474d;
  --ink-300: #62656c;
  --nav-bg: #17181b;
  --nav-hover: #25272c;
  --nav-line: #2e3036;
  --nav-ink: #eeeff1;
  --nav-ink-muted: #9a9ea6;
  --nav-active-bg: #c8ff2e;
  --nav-active-ink: #15180a;
  --accent: #17181b;
  --on-accent: #c8ff2e;
  --accent-hover: #2c2e33;
  --accent-text: #4a6400;
  --accent-soft: #c8ff2e59;
  --ion: #0b62c4;
  --ion-soft: #0b62c414;
  --positive: #00725c;
  --positive-soft: #00725c14;
  --negative: #b83400;
  --negative-soft: #c2380014;
  --warning: #855b00;
  --warning-soft: #855b0014;
  --mod-ads: #0b62c4;
  --mod-creative: #c4149a;
  --mod-sales: #5c7a00;
  --mod-finance: #855b00;
  --mod-ops: #5b45d6;
  --chart-1: #0b62c4;
  --chart-2: #5c7a00;
  --chart-3: #c4149a;
  --chart-4: #b86a00;
  --chart-5: #5b45d6;
  --chart-6: #00806a;
  --shadow-pop: 0 12px 32px rgba(23,24,27,0.12);
  --shadow-card: 0 1px 2px rgba(23,24,27,0.05), 0 2px 8px rgba(23,24,27,0.04);
  --shadow-modal: 0 24px 80px rgba(14,16,20,0.22);
  --glow-accent: 0 0 0 1px #17181b, 0 0 0 4px rgba(200,255,46,0.6);
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #17181b;
}
.display-xl { font-family: var(--font-sans); font-size: 52px; line-height: 58px; font-weight: 800; letter-spacing: -0.035em; }
.display-lg { font-family: var(--font-sans); font-size: 34px; line-height: 40px; font-weight: 800; letter-spacing: -0.03em; }
.display-md { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.02em; }
.title-lg { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.title-md { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 700; }
.body { font-family: var(--font-sans); font-size: 14px; line-height: 21px; font-weight: 500; }
.body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 19px; font-weight: 500; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; }
.metric-xl { font-family: var(--font-sans); font-size: 44px; line-height: 50px; font-weight: 800; letter-spacing: -0.035em; }
.metric-lg { font-family: var(--font-sans); font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.025em; }
.metric-md { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; }
.data { font-family: var(--font-sans); font-size: 13px; line-height: 19px; font-weight: 600; }
.data-sm { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; }
.code { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; }