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

:root {
  /* Dark background colors */
  --bg-primary: #0a0a0a;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #2a2a2a;
  --bg-card: #151515;
  --bg-overlay: rgba(0, 0, 0, 0.8);

  /* Text colors */
  --text-primary: #f0f0f0;
  --text-secondary: #b0b0b0;
  --text-muted: #888888;
  --text-inverse: #0a0a0a;

  /* Accent colors */
  --accent-primary: #7e57c2;
  --accent-secondary: #5e35b1;
  --accent-hover: #9575cd;

  /* State colors */
  --success: #4caf50;
  --warning: #ff9800;
  --error: #f44336;
  --info: #2196f3;

  /* Border colors */
  --border-primary: #333333;
  --border-secondary: #444444;
  --border-accent: #7e57c2;

  /* Shadow colors */
  --shadow-light: rgba(0, 0, 0, 0.3);
  --shadow-dark: rgba(0, 0, 0, 0.6);

  /* Interactive states */
  --hover-overlay: rgba(0, 0, 0, 0.75);
  --active-overlay: rgba(255, 255, 255, 0.1);
  --focus-glow: rgba(126, 87, 194, 0.4);

  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(
    135deg,
    var(--bg-secondary) 0%,
    var(--accent-secondary) 100%
  );
  color: var(--text-primary);
  /* padding: 40px 20px; */
  min-height: 100vh;
}