/* Define CSS Variables */
:root {
  --background-color: #f8f7fc;    /* Light purple-tinted background */
  --text-color: #2d2438;          /* Dark purple text */
  --primary-color: #6b46c1;       /* Bright purple for primary elements */
  --secondary-color: #ffffff;      /* White for cards and containers */
  --border-color: #e9e4f0;        /* Light purple borders */
  --accent-color: #9f7aea;        /* Lighter purple for accents */
  --gradient-start: #6b46c1;      /* Purple gradient start */
  --gradient-end: #805ad5;        /* Purple gradient end */
}

/* Apply CSS Variables */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  transition: background 0.3s, color 0.3s;
  background-color: var(--background-color);
  color: var(--text-color);
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Add subtle pattern to background */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(45deg, var(--background-color) 25%, transparent 25%),
    linear-gradient(-45deg, var(--background-color) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--background-color) 75%),
    linear-gradient(-45deg, transparent 75%, var(--background-color) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  opacity: 0.05;
  z-index: -1;
  pointer-events: none;
}

/* Keyframes for animations */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}