/* --- Global Variables --- */
:root {
  /* Dark Mode Colors */
  --bg-dark: #1a1b1e;
  --bg-darker: #141517;
  --bg-lighter: #25262b;
  --primary-color: #a78bfa; /* Soft purple */
  --primary-color-dark: #8b5cf6;
  --secondary-color: #60a5fa; /* Soft blue */
  --text-color: #e2e8f0;
  --text-color-muted: #94a3b8;
  --text-color-dimmed: #64748b;
  --border-color: rgba(255, 255, 255, 0.1);
  --input-bg-color: rgba(255, 255, 255, 0.05);
  --input-readonly-bg-color: rgba(255, 255, 255, 0.03);
  --success-color: #34d399; /* Softer green */
  --error-color: #fb7185; /* Softer red */
  --white: #ffffff;
  --icon-color: #94a3b8;
  --icon-hover-color: var(--primary-color);

  /* Fun Effects */
  --box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  --glow-purple: 0 0 20px rgba(167, 139, 250, 0.15);
  --glow-blue: 0 0 20px rgba(96, 165, 250, 0.15);
  --border-radius: 12px;
  --font-family: "Inter", sans-serif;
  --transition-speed: 0.25s;
  --input-height: 44px;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}