/* ============================================================================
   RESET STYLES
   ============================================================================ */
*,
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================================
   TEXT SELECTION
   ============================================================================ */

::-moz-selection {
  color: white;
  background: var(--primary-color);
}

::selection {
  color: white;
  background: var(--primary-color);
}

/* ============================================================================
   CSS VARIABLES
   ============================================================================ */

:root {
    /* Colors */
  --primary-color: #007bff;
  --secondary-color: #00ffff;
  --tertiary-color: #ff008c;
  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
    /* Border radius */
  --border-radius-sm: 0.5rem;
  --border-radius-md: 0.75rem;
  --border-radius-lg: 1.5rem;
    /* Transitions */
  --transition-speed: 0.3s;
  --transition-timing: ease-in-out;
    /* Shadows */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  --shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}