:root {
  /* Palette */
  --vt-bg: #F8F5FF;
  /* near-white with lavender tint   */
  --vt-bg-2: #F0EAFF;
  /* slightly deeper lavender        */
  --vt-surface: #FFFFFF;
  --vt-surface-2: rgba(255, 255, 255, 0.72);

  --vt-purple-900: #1E0A35;
  /* near-black purple               */
  --vt-purple-800: #2D1B3D;
  --vt-purple-700: #42265C;
  --vt-purple-500: #7C3AED;
  /* primary accent                  */
  --vt-purple-400: #A855F7;
  --vt-purple-300: #C084FC;
  /* glow                            */
  --vt-purple-200: #E9D5FF;
  --vt-purple-100: #F5F0FF;

  --vt-ink: #1A0A2E;
  /* body text                       */
  --vt-ink-2: #4A3560;
  /* muted text                      */
  --vt-ink-3: #7E6A96;
  /* very muted                      */
  --vt-border: rgba(124, 58, 237, 0.14);
  --vt-border-2: rgba(124, 58, 237, 0.28);

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;
}



:root {
  --c-bg: #F7F4FD;
  --c-surface: ##FFFFFF;
  --c-surface-2: #F0EBFB;
  --c-border: rgba(108, 43, 217, 0.12);
  --c-purple-900: #1E0B45;
  --c-purple-800: #2D1366;
  --c-purple-700: #42265C;
  --c-purple-600: #5B21B6;
  --c-purple-500: #7C3AED;
  --c-purple-400: #A78BFA;
  --c-purple-300: #C4B5FD;
  --c-purple-100: #EDE9FE;
  --c-accent: #9333EA;
  --c-text-primary: #1A0A35;
  --c-text-body: #3D2E5A;
  --c-text-muted: #7E6DA0;
  --c-white: #FFFFFF;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --shadow-card: 0 2px 20px rgba(108, 43, 217, 0.08), 0 1px 4px rgba(108, 43, 217, 0.05);
  --shadow-card-hover: 0 12px 40px rgba(108, 43, 217, 0.18), 0 4px 12px rgba(108, 43, 217, 0.1);

  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  --font: 'Montserrat', sans-serif;
}


.hidden {
  display: none;
}

.align-middle {
  vertical-align: middle;
}

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

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

.center-text {
  text-align: center;
}

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

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

.justify-text {
  text-align: justify;
}

.bottom-content {
  align-self: flex-end;
}

.full-dimensions {
  width: 100%;
  height: 100%;
}

.set-content-margin {
  margin: 0px 25px 0px 25px;
}

.half-width-right {
  width: 50%;
  height: 100%;
  float: right;
}

.company-main-backgroundColor {
  background-color: #7C4FC5;
}

.company-green-backgroundColor {
  background-color: #7FB061;
}

.company-main-color {
  color: #7C4FC5;
}

.company-secondary-backgroundColor {
  background-color: #B9A1D6;
}

.company-secondary-color {
  color: #B9A1D6;
}

.company-main-color-opacity {
  background-color: #7C4FC5;
}

.company-main-color-opacity2 {
  background-color: #7c4fc52d;
}

.company-main-color-opacity4 {
  background-color: rgba(0, 0, 0, 0.45);
}

.company-main-color-opacity3 {
  background-color: #7c4fc5c0
}

.info-msg,
.success-msg,
.warning-msg,
.error-msg {
  margin: 10px 0;
  padding: 10px;
  border-radius: 3px 3px 3px 3px;
}

.info-msg {
  color: #059;
  background-color: #BEF;
}

.success-msg {
  color: #270;
  background-color: #DFF2BF;
  animation: slideInLeftAndStretch 0.5s;
}

.warning-msg {
  color: #9F6000;
  background-color: #FEEFB3;
  animation: fadeIn 0.5s;
}

.error-msg {
  color: #D8000C;
  background-color: #FFBABA;
  animation: shake 0.5s;
}

.crud-action:hover {
  background-color: #7C4FC5;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slideIn {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideInLeftAndStretch {
  0% {
    opacity: 0;
    transform: translateX(-100%) scaleX(0.8);
  }

  70% {
    opacity: 1;
    transform: translateX(0) scaleX(1.1);
  }

  100% {
    transform: scaleX(1);
  }
}