:root {

  --font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --space-1: 4px;

  --space-2: 8px;

  --space-3: 12px;

  --space-4: 16px;

  --space-5: 24px;

  --space-6: 32px;

  --space-7: 48px;

  --radius-sm: 2px;

  --radius: 3px;

  --radius-lg: 4px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --duration: 180ms;

  --shadow: 0 12px 32px rgba(0, 0, 0, 0.4);

  --sidebar: 200px;

  --sidebar-collapsed: 56px;

  --topbar: 48px;

  --text-xs: 10px;

  --text-sm: 11px;

  --text-md: 12px;

  --text-base: 13px;

  --text-lg: 15px;

  --text-xl: 20px;

  --text-2xl: 26px;

  --text-3xl: 34px;

}



[data-theme="dark"] {

  color-scheme: dark;

  --bg: #06080d;

  --bg-2: #0a0d14;

  --surface: #0f131a;

  --elevated: #151a24;

  --border: #1e2533;

  --border-strong: #2c3548;

  --text: #f1f5f9;

  --text-2: #94a3b8;

  --text-3: #64748b;

  --accent: #7dd3fc;

  --accent-2: #bae6fd;

  --accent-soft: rgba(125, 211, 252, 0.12);

  --ok: #34d399;

  --ok-soft: rgba(52, 211, 153, 0.16);

  --warn: #fbbf24;

  --warn-soft: rgba(251, 191, 36, 0.14);

  --visit: #fb923c;

  --visit-soft: rgba(251, 146, 60, 0.14);

  --danger: #f87171;

  --danger-soft: rgba(248, 113, 113, 0.14);

  --info: #38bdf8;

  --info-soft: rgba(56, 189, 248, 0.14);

  --mute: #64748b;

  --mute-soft: rgba(100, 116, 139, 0.14);

  --grid: rgba(125, 211, 252, 0.07);

  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  --chart-fill: rgba(52, 211, 153, 0.16);

  --chart-stroke: #34d399;

  --btn-fg: #06080d;

  --shadow: 0 16px 40px rgba(0, 0, 0, 0.45);

}



html[data-theme="light"] {

  color-scheme: light;

  --bg: #f8fafc;

  --bg-2: #f1f5f9;

  --surface: rgba(255, 255, 255, 0.82);

  --elevated: #ffffff;

  --border: #e2e8f0;

  --border-strong: #cbd5e1;

  --text: #0f172a;

  --text-2: #475569;

  --text-3: #64748b;

  --accent: #0369a1;

  --accent-2: #0c4a6e;

  --accent-soft: rgba(3, 105, 161, 0.08);

  --ok: #059669;

  --ok-soft: rgba(5, 150, 105, 0.1);

  --warn: #d97706;

  --warn-soft: rgba(217, 119, 6, 0.1);

  --visit: #0369a1;

  --visit-soft: rgba(3, 105, 161, 0.08);

  --danger: #dc2626;

  --danger-soft: rgba(220, 38, 38, 0.08);

  --info: #0284c7;

  --info-soft: rgba(2, 132, 199, 0.1);

  --mute: #64748b;

  --mute-soft: rgba(100, 116, 139, 0.1);

  --grid: rgba(15, 23, 42, 0.05);

  --shadow: 0 10px 30px rgba(15, 23, 42, 0.06);

  --chart-fill: rgba(5, 150, 105, 0.1);

  --chart-stroke: #059669;

  --btn-fg: #ffffff;

}