:root {
  /* Colors */
  --vitron-overlay-color: #ffffff3d;
  --vitron-highlight: #ffffffb8;
  --vitron-non-glass-bg: #ffffff00;
  --vitron-white: #ffffff;
  --vitron-accent: #1c64f2;

  /* text colors */
  --vitron-text-primary: #ffffff;
  --vitron-text-secondary: #979797;

  --vitron-blur: 2px;
  --vitron-border-radius: 12px;
  --vitron-border-full-radius: 100%;

  /* offsets */
  --vitron-offset-xs-s: 4px;
  --vitron-offset-xs: 8px;
  --vitron-offset-xs-l: 12px;
  --vitron-offset-sm-s: 16px;
  --vitron-offset-sm: 20px;
  --vitron-offset-sm-l: 24px;
  --vitron-offset-md-s: 28px;
  --vitron-offset-md: 32px;
  --vitron-offset-md-l: 36px;
  --vitron-offset-lg-s: 40px;
  --vitron-offset-lg: 44px;
  --vitron-offset-lg-l: 48px;
  --vitron-offset-xl-s: 52px;
  --vitron-offset-xl: 56px;
  --vitron-offset-xl-l: 60px;

  /* widths */
  --vitron-width-sm: 20px;
  --vitron-full-w: 100%;

  /* heights */
  --vitron-height-sm: 20px;
  --vitron-full-h: 100%;

  /* fonts sizes */
  --vitron-font-size-xs: 10px;
  --vitron-font-size-sm: 12px;
  --vitron-font-size-md: 14px;
  --vitron-font-size-lg: 16px;
  --vitron-font-size-xl: 18px;
  --vitron-font-size-2xl: 20px;

  /* border width */
  --vitron-border-width: 2px;
}

.vui-dark {
  --vitron-overlay-color: #0000003d;
  --vitron-highlight: #ffffff26;
  --vitron-non-glass-bg: #1c1c1cb3;
}

/* Helpers */
.vitron-glass {
  color: var(--vitron-text-primary);
  position: relative;
  border: none;
  overflow: hidden;
  background: transparent;
  outline: none;
}

.vitron-full-w {
  width: var(--vitron-full-w);
}

.vitron-full-h {
  height: var(--vitron-full-h);
}

.vitron-full {
  width: var(--vitron-full-w);
  height: var(--vitron-full-h);
}

.vitron-flex {
  display: flex;
}

.vitron-flex-col {
  flex-direction: column;
}

.vitron-flex-row {
  flex-direction: row;
}

.vitron-flex-center {
  justify-content: center;
  align-items: center;
}

.vitron-flex-between {
  justify-content: space-between;
  align-items: center;
}

.vitron-flex-around {
  justify-content: space-around;
  align-items: center;
}