:root {
  --vtb-color-primary: #1e4bd2;
  --vtb-color-primary--hover: #3f68e4;
  --vtb-color-primary--active: #183ba5;
  --vtb-color-primary-text: #ffffff;
  --vtb-color-primary-alt: #0a2896;
  --vtb-color-primary-alt--hover: #0084ff;
  --vtb-color-primary-alt-text: #ffffff;
  --vtb-color-background: #f6f7fe;
  --vtb-color-background--hover: #edf6ff;
  --vtb-color-background--active: #e0eef8;
  --vtb-color-background-text: #2f3441;
  --vtb-color-background-alt: #ffffff;
  --vtb-color-background-alt-text: #2f3441;
  --vtb-color-surface: #edf6ff;
  --vtb-color-surface-text: #2f3441;
  --vtb-color-surface-alt: #f3f7fa;
  --vtb-color-surface-alt-text: #2f3441;
  --vtb-color-bottomsheet: #fff;
  --vtb-color-bottomsheet-text: #000;
  --vtb-color-backdrop: rgba(47, 52, 65, 0.6);
  --vtb-color-backdrop-text: #ffffff;
  --vtb-color-icon: #d4d7df;
  --vtb-color-icon-text: #2f3441;
  --vtb-color-placeholder: #606981;
  --vtb-color-placeholder-text: #ffffff;
  --vtb-color-placeholder-alt: #b6c1dd;
  --vtb-color-placeholder-alt-text: #2f3441;
  --vtb-color-error: #d42c37;
  --vtb-color-error-text: #ffffff;
  --vtb-color-border-alt: #9eadd4;
}

@supports (color: oklch(0% 0 0)) {
  :root {
    --vtb-color-primary: oklch(0.4775 0.2129 264.78);
    --vtb-color-primary--hover: oklch(0.5593 0.194 266.3);
    --vtb-color-primary--active: oklch(0.4035 0.1751 265);
    --vtb-color-primary-text: oklch(1 0 0);
    --vtb-color-primary-alt: oklch(0.3499 0.1803 264.94);
    --vtb-color-primary-alt--hover: oklch(0.6236 0.206275 255.1294);
    --vtb-color-primary-alt-text: oklch(1 0 0);
    --vtb-color-background: oklch(0.9774 0.0094 279.69);
    --vtb-color-background--hover: oklch(0.969 0.0154 247.99);
    --vtb-color-background--active: oklch(0.9416 0.0202 238.67);
    --vtb-color-background-text: oklch(0.3257 0.0241 268.53);
    --vtb-color-background-alt: oklch(1 0 0);
    --vtb-color-background-alt-text: oklch(0.3257 0.0241 268.53);
    --vtb-color-surface: oklch(0.969 0.0154 247.99);
    --vtb-color-surface-text: oklch(0.3257 0.0241 268.53);
    --vtb-color-surface-alt: oklch(0.974 0.0059 239.82);
    --vtb-color-surface-alt-text: oklch(0.3257 0.0241 268.53);
    --vtb-color-bottomsheet: oklch(1 0 0);
    --vtb-color-bottomsheet-text: oklch(0 0 0);
    --vtb-color-backdrop: oklch(0.3257 0.0241 268.53 / 60%);
    --vtb-color-backdrop-text: oklch(1 0 0);
    --vtb-color-icon: oklch(0.8792 0.0114 269.54);
    --vtb-color-icon-text: oklch(0.3257 0.0241 268.53);
    --vtb-color-placeholder: oklch(0.5222 0.0395 268.89);
    --vtb-color-placeholder-text: oklch(1 0 0);
    --vtb-color-placeholder-alt: oklch(0.8115 0.0413 268.46);
    --vtb-color-placeholder-alt-text: oklch(0.3257 0.0241 268.53);
    --vtb-color-error: oklch(0.5685 0.2024 23.66);
    --vtb-color-error-text: oklch(1 0 0);
    --vtb-color-border-alt: oklch(0.7495 0.0588 268.48);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  letter-spacing: -0.3px;
  -webkit-tap-highlight-color: transparent;
}

*:focus-visible {
  outline: none;
}

html {
  color-scheme: light;
}

body {
  font-size: 16px;
  background-color: var(--vtb-color-background);
  color: var(--vtb-color-background-text);
}

svg {
  vertical-align: middle;
}