:root {
  color-scheme: light;
  --font-sans: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;

  --color-canvas: #edf3fb;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-subtle: #f1f6fc;
  --color-surface-hover: #e8f0fb;
  --color-surface-selected: #dce9fb;
  --color-input: #fbfdff;
  --color-topbar: rgba(250, 252, 255, 0.94);
  --color-overlay: rgba(5, 8, 22, 0.58);

  --color-text: #1d2d49;
  --color-text-strong: #09172d;
  --color-heading: #123d75;
  --color-text-muted: #5f708d;
  --color-text-faint: #788ba8;
  --color-on-primary: #ffffff;

  --color-border: #cfdaea;
  --color-border-strong: #aebfd7;
  --color-focus-ring: rgba(23, 104, 229, 0.28);

  --color-primary: #1768e5;
  --color-primary-strong: #0f4fb8;
  --color-primary-soft: #deebff;
  --color-primary-border: #99baf0;

  --color-success: #0a927b;
  --color-success-soft: #dcf4ed;
  --color-success-border: #9edacb;
  --color-info: #0788a4;
  --color-info-soft: #dcf2f7;
  --color-info-border: #9ed8e3;
  --color-warning: #b95a00;
  --color-warning-soft: #ffecd0;
  --color-warning-border: #f0d09b;
  --color-danger: #d8463d;
  --color-danger-soft: #ffe7e3;
  --color-danger-border: #f7b9b2;
  --color-accent: #6658d6;
  --color-accent-soft: #ebe8ff;
  --color-accent-border: #c7c0f4;
  --color-traffic-download: #0a927b;
  --color-traffic-upload: #f26b45;
  --surface-tint-strength: 62%;
  --overview-tint-strength: 55%;

  --color-sidebar: #050816;
  --color-sidebar-hover: #111d38;
  --color-sidebar-active: #142958;
  --color-sidebar-text: #f8fbff;
  --color-sidebar-muted: #9cadca;
  --color-sidebar-border: rgba(255, 255, 255, 0.1);
  --color-sidebar-indicator: #63a0ff;
  --color-nav-emerald: #20d4ae;
  --color-nav-blue: #75a5ff;
  --color-nav-amber: #ffc164;
  --color-nav-cyan: #28d7f2;
  --color-nav-violet: #aaa5ff;
  --color-nav-rose: #ff8a7d;
  --color-nav-sky: #63c7ff;
  --color-nav-slate: #b6c5df;
  --color-nav-orange: #ff9b66;
  --color-nav-red: #ff7568;

  --color-chart-grid: #d2deef;
  --color-monitor-value-bg: #e6f0fb;
  --color-monitor-value-border: #bfd0e5;
  --color-monitor-value-label: #526c8e;
  --color-monitor-value-text: #0a1c36;
  --color-code-bg: #050814;
  --color-code-text: #e5edff;
  --color-toast: #071126;
  --color-toast-text: #ffffff;
  --color-print-surface: #ffffff;
  --color-print-subtle: #f5f5f5;
  --color-print-text: #111111;
  --color-print-border: #333333;
  --color-print-border-soft: #bbbbbb;

  --radius-control: 6px;
  --radius-panel: 8px;
  --shadow-panel: 0 1px 2px rgba(17, 48, 91, 0.06), 0 9px 24px rgba(17, 48, 91, 0.055);
  --shadow-panel-hover: 0 2px 4px rgba(17, 48, 91, 0.09), 0 13px 30px rgba(17, 48, 91, 0.08);
  --shadow-control: 0 1px 2px rgba(12, 32, 70, 0.08);
  --shadow-topbar: 0 8px 24px rgba(12, 32, 70, 0.06);
  --shadow-dialog: 0 24px 70px rgba(5, 8, 22, 0.28);

  --space-page-desktop: 28px;
  --space-page-mobile: 14px;
  --control-height: 36px;
  --motion-fast: 140ms;
}

body.dark {
  color-scheme: dark;
  --color-canvas: #050814;
  --color-surface: #0b1327;
  --color-surface-raised: #101a32;
  --color-surface-subtle: #0e1930;
  --color-surface-hover: #142447;
  --color-surface-selected: #102b60;
  --color-input: #070d1d;
  --color-topbar: rgba(5, 8, 20, 0.94);
  --color-overlay: rgba(2, 4, 10, 0.78);

  --color-text: #dce7fb;
  --color-text-strong: #ffffff;
  --color-heading: #ff9f43;
  --color-text-muted: #91a3c3;
  --color-text-faint: #7185aa;
  --color-on-primary: #ffffff;

  --color-border: #1d3158;
  --color-border-strong: #2f4e82;
  --color-focus-ring: rgba(47, 117, 255, 0.42);

  --color-primary: #2f75ff;
  --color-primary-strong: #75a5ff;
  --color-primary-soft: #102b60;
  --color-primary-border: #2f5da8;

  --color-success: #20d4ae;
  --color-success-soft: #0c382f;
  --color-success-border: #176c5a;
  --color-info: #16c5e8;
  --color-info-soft: #0b3441;
  --color-info-border: #176479;
  --color-warning: #ffc164;
  --color-warning-soft: #422f17;
  --color-warning-border: #7c5724;
  --color-danger: #ff6252;
  --color-danger-soft: #451e21;
  --color-danger-border: #83403d;
  --color-accent: #16c5e8;
  --color-accent-soft: #0b3441;
  --color-accent-border: #176479;
  --color-traffic-download: #20d4ae;
  --color-traffic-upload: #ff815c;
  --surface-tint-strength: 38%;
  --overview-tint-strength: 34%;

  --color-sidebar: #02040a;
  --color-sidebar-hover: #0d1730;
  --color-sidebar-active: #102b60;
  --color-sidebar-text: #ffffff;
  --color-sidebar-muted: #91a7cf;
  --color-sidebar-border: rgba(255, 255, 255, 0.08);
  --color-sidebar-indicator: #63a0ff;
  --color-nav-emerald: #20d4ae;
  --color-nav-blue: #75a5ff;
  --color-nav-amber: #ffc164;
  --color-nav-cyan: #28d7f2;
  --color-nav-violet: #aaa5ff;
  --color-nav-rose: #ff8a7d;
  --color-nav-sky: #63c7ff;
  --color-nav-slate: #b6c5df;
  --color-nav-orange: #ff9b66;
  --color-nav-red: #ff7568;

  --color-chart-grid: #1d3158;
  --color-monitor-value-bg: #010308;
  --color-monitor-value-border: #1d3158;
  --color-monitor-value-label: #91a7cf;
  --color-monitor-value-text: #ffffff;
  --color-code-bg: #02040a;
  --color-code-text: #dce7fb;
  --color-toast: #102b60;
  --color-toast-text: #ffffff;

  --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.24), 0 10px 26px rgba(0, 0, 0, 0.12);
  --shadow-panel-hover: 0 2px 4px rgba(0, 0, 0, 0.28), 0 14px 30px rgba(0, 0, 0, 0.18);
  --shadow-control: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-topbar: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-dialog: 0 28px 80px rgba(0, 0, 0, 0.48);
}