:root {
  --color-bg: #f6f5f4;
  --color-surface: #ffffff;
  --color-surface-soft: #fbfaf8;
  --color-ink: #0f0f0f;
  --color-text: #31302e;
  --color-muted: #615d59;
  --color-faint: #a39e98;
  --color-line: #e6e6e6;
  --color-primary: #0075de;
  --color-primary-pressed: #005bab;
  --color-primary-soft: #eef6ff;
  --color-hero: #213183;
  --color-hero-deep: #172a5c;
  --color-hero-soft: rgba(255, 255, 255, 0.12);
  --color-success: #1aae39;
  --color-success-soft: #edf8f1;
  --color-warning: #dd8a00;
  --color-warning-soft: #fff8eb;
  --color-danger: #d54836;
  --color-danger-soft: #fff3ef;
  --color-sky: #62aef0;
  --color-purple: #d6b6f6;
  --color-pink: #ff64c8;
  --color-orange: #dd5b00;
  --color-teal: #2a9d99;
  --color-page-backdrop: #ecebea;
  --color-topbar: rgba(246, 245, 244, 0.92);
  --color-nav: rgba(255, 255, 255, 0.95);
  --color-avatar: #e9e7e4;
  --color-progress-track: #ecebea;
  --color-toast: rgba(255, 255, 255, 0.97);
  --color-overlay: rgba(15, 15, 15, 0.38);
  --color-sheet-handle: #d6d3cf;
  --color-device-border: #dedddb;
  --color-success-text: #157b2a;
  --color-warning-text: #946000;
  --color-filter-border: #cfe5ff;
  --color-control-border: #bddcff;
  --color-reserve: #79629a;
  --color-reserve-soft: #f4eefb;
  --color-insight-border: #d9eaff;
  --color-insight-icon: #ffffff;
  --focus-ring: rgba(0, 117, 222, 0.22);

  --font-xs: 11px;
  --font-sm: 12px;
  --font-md: 14px;
  --font-base: 15px;
  --font-lg: 18px;
  --font-xl: 22px;
  --font-display: 34px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-hero: 26px;
  --radius-pill: 999px;

  --shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-hero: 0 18px 50px rgba(33, 49, 131, 0.18);
  --shadow-nav: 0 -4px 18px rgba(0, 0, 0, 0.035);

  --topbar-height: 72px;
  --nav-height: 78px;
  --z-topbar: 20;
  --z-nav: 40;
  --z-toast: 60;
}

:root[data-theme="dark"] {
  --color-bg: #191919;
  --color-surface: #202020;
  --color-surface-soft: #242424;
  --color-ink: #f1f1ef;
  --color-text: #deddd9;
  --color-muted: #a4a29e;
  --color-faint: #777571;
  --color-line: #363636;
  --color-primary: #5aa9f2;
  --color-primary-pressed: #78b9f5;
  --color-primary-soft: rgba(90, 169, 242, 0.14);
  --color-hero: #293778;
  --color-hero-deep: #202c61;
  --color-success: #62c97a;
  --color-success-soft: rgba(98, 201, 122, 0.13);
  --color-warning: #e2a74f;
  --color-warning-soft: rgba(226, 167, 79, 0.14);
  --color-danger: #ef786a;
  --color-danger-soft: rgba(239, 120, 106, 0.13);
  --color-page-backdrop: #141414;
  --color-topbar: rgba(25, 25, 25, 0.92);
  --color-nav: rgba(32, 32, 32, 0.96);
  --color-avatar: #2c2c2c;
  --color-progress-track: #343434;
  --color-toast: rgba(36, 36, 36, 0.98);
  --color-overlay: rgba(16, 16, 16, 0.68);
  --color-sheet-handle: #505050;
  --color-device-border: #3a3a3a;
  --color-success-text: #78d68e;
  --color-warning-text: #e7b76d;
  --color-filter-border: rgba(90, 169, 242, 0.38);
  --color-control-border: rgba(90, 169, 242, 0.45);
  --color-reserve: #b59ad8;
  --color-reserve-soft: rgba(181, 154, 216, 0.14);
  --color-insight-border: rgba(90, 169, 242, 0.24);
  --color-insight-icon: #292929;
  --focus-ring: rgba(90, 169, 242, 0.3);
  --shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.18);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-hero: 0 18px 50px rgba(0, 0, 0, 0.3);
  --shadow-nav: 0 -4px 18px rgba(0, 0, 0, 0.22);
}