:root {
  --primary: #1976d2;
  --primary-dark: #1565c0;
  --primary-light: #42a5f5;
  --accent: #ff4081;
  --text-primary: #212121;
  --text-secondary: #757575;
  --divider: #e0e0e0;
  --background: #fafafa;
  --card-background: #ffffff;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-elevated: 0 8px 16px rgba(0, 0, 0, 0.2);
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--background);
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
  padding: 0;

  @media (width <= 768px) {
    font-size: 16px;
  }
}