@import "tailwindcss";

@layer base {
  :root {
    --matcon-purple: #423475;
    --matcon-rose: #D45762;
    --matcon-mint: #61B89A;
    --matcon-lemon: #F0F57D;
    --matcon-teal: #4AA7BA;
    --matcon-orange: #F3972D;
    --matcon-navy: #0F2B48;
    --matcon-bg: #F8FAFC;
  }
}

@theme {
  --color-matcon-purple: #423475;
  --color-matcon-rose: #D45762;
  --color-matcon-mint: #61B89A;
  --color-matcon-lemon: #F0F57D;
  --color-matcon-teal: #4AA7BA;
  --color-matcon-orange: #F3972D;
  --color-matcon-navy: #0F2B48;
  --color-matcon-bg: #F8FAFC;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #F8FAFC;
  color: #423475;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Custom interactive animations */
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

.animate-shake {
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

/* Custom minimal scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4AA7BA;
}