:root, [data-vi-theme="light"]{
  --vi-background: #f9f9f9ff;
  --vi-surface: #ffffffff;
  --vi-surface-subtle: #f0f0f0ff;
  --vi-text: #000000ff;
  --vi-text-secondary: #222222ff;
  --vi-text-muted: #555555ff;
  --vi-text-tertiary: #777777ff;
  --vi-text-disabled: #999999ff;
  --vi-border: #22222214;
  --vi-primary: #007af5ff;
  --vi-on-primary: #ffffffff;
  --vi-primary-hover: #0064baff;
  --vi-primary-active: #00529aff;
  --vi-primary-disabled: #218eff3d;
  --vi-neutral: #333333ff;
  --vi-neutral-hover: #555555ff;
  --vi-neutral-active: #111111ff;
  --vi-neutral-disabled: #2222223d;
  --vi-danger: #e50038ff;
  --vi-danger-hover: #c2012eff;
  --vi-danger-active: #a10024ff;
  --vi-danger-text: #e50038ff;
  --vi-danger-surface: #e5003814;
  --vi-success: #048645ff;
  --vi-success-surface: #04864514;
  --vi-warning: #e2b300ff;
  --vi-warning-surface: #e2b30014;
  --vi-overlay: #222222a3;
  --vi-primary-surface: #218eff14;
  --vi-surface-deep: #f0f0f0ff;
}
[data-vi-theme="dark"]{
  --vi-background: #111111ff;
  --vi-surface: #333333ff;
  --vi-surface-subtle: #333333ff;
  --vi-text: #ffffffff;
  --vi-text-secondary: #f0f0f0ff;
  --vi-text-muted: #999999ff;
  --vi-text-tertiary: #777777ff;
  --vi-text-disabled: #555555ff;
  --vi-border: #f9f9f914;
  --vi-primary: #007af5ff;
  --vi-on-primary: #ffffffff;
  --vi-primary-hover: #0064baff;
  --vi-primary-active: #00529aff;
  --vi-primary-disabled: #218eff3d;
  --vi-neutral: #f0f0f0ff;
  --vi-neutral-hover: #c2c2c2ff;
  --vi-neutral-active: #888888ff;
  --vi-neutral-disabled: #f9f9f93d;
  --vi-danger: #e50038ff;
  --vi-danger-hover: #c2012eff;
  --vi-danger-active: #a10024ff;
  --vi-danger-text: #e50038ff;
  --vi-danger-surface: #e5003829;
  --vi-success: #048645ff;
  --vi-success-surface: #04864514;
  --vi-warning: #e2b300ff;
  --vi-warning-surface: #e2b30014;
  --vi-overlay: #000000a3;
  --vi-primary-surface: #218eff29;
  --vi-surface-deep: #000000ff;
}
:root{--vi-radius-0:0px;}
:root{--vi-radius-2:2px;}
:root{--vi-radius-4:4px;}
:root{--vi-radius-8:8px;}
:root{--vi-radius-16:16px;}
:root{--vi-radius-24:24px;}
:root{--vi-radius-32:32px;}
:root{--vi-radius-1:1px;}
:root{--vi-radius-12:12px;}
:root{--vi-radius-0:0px;}
:root{--vi-gap-0:0px;}
:root{--vi-gap-4:4px;}
:root{--vi-gap-8:8px;}
:root{--vi-gap-12:12px;}
:root{--vi-gap-16:16px;}
:root{--vi-gap-20:20px;}
:root{--vi-gap-24:24px;}
:root{--vi-gap-32:32px;}
:root{--vi-gap-40:40px;}
:root{--vi-gap-48:48px;}
:root{--vi-gap-56:56px;}
:root{--vi-gap-64:64px;}
:root{--vi-gap-72:72px;}
:root{--vi-gap-2:2px;}
:root{--vi-font-body-l:16px;}
:root{--vi-font-caption-s:10px;}
:root{--vi-font-caption-m:12px;}
:root{--vi-font-body-s:14px;}
:root{--vi-font-body-m:15px;}
:root{--vi-font-caption-l:13px;}
:root{--vi-font-body-xl:17px;}
:root{--vi-font-title-s:18px;}
:root{--vi-font-title-m:20px;}
:root{--vi-font-title-l:24px;}
:root{--vi-font-headline-m:32px;}
:root{--vi-font-headline-s:28px;}
:root{--vi-font-headline-l:40px;}
:root{--vi-font-display-s:48px;}
:root{--vi-font-display-m:56px;}
:root{--vi-font-display-l:64px;}
:root{--vi-font-display-xl:72px;}
:root{--vi-font-display-xxl:80px;}
:root{--vi-font-display-xxxl:120px;}
:root{--vi-font-caption-xs:8px;}