:root {
  /* Default CSS Variables - Will be overridden by ThemeContext */
  --primary-color: #3182ce;
  --secondary-color: #4c1d95;
  --accent-color: #e9d5ff;
  --background-color: #ffffff;
  --text-color: #1a202c;
  --heading-color: #2d3748;

  --font-family: system-ui, -apple-system, sans-serif;
  --font-size-small: 0.875rem;
  --font-size-base: 1rem;
  --font-size-large: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-xxl: 1.5rem;

  --border-radius: 0.375rem;

  --spacing-small: 1rem;
  --spacing-medium: 2rem;
  --spacing-large: 4rem;

  --transition-duration: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

  --hover-scale: 1.05;
  --hover-brightness: 110%;
}

/* Extract RGB values from color variables for transparency operations */
:root {
  --primary-color-rgb: 49, 130, 206; /* Derived from #3182ce */
  --secondary-color-rgb: 76, 29, 149; /* Derived from #4c1d95 */
  --accent-color-rgb: 233, 213, 255; /* Derived from #e9d5ff */
  --text-color-rgb: 26, 32, 44; /* Derived from #1a202c */
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  color: var(--text-color);
  background-color: var(--background-color);
}

/* Basic resets */
* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}