:root {
    --primary-color: #1e88e5;
    --primary-hover: #1565c0;
    --bg-gradient: linear-gradient(135deg, #1c2c4e, #317d93);
    --text-light: #f5f5f5;
    --text-dark: #333;
    --font-family: "Trebuchet MS", sans-serif;
    --border-radius: 7px;
   
      /* BACKGROUNDS & SURFACES */
      --primary-bg: #121212;      /* Deep dark background (Body) */
      --secondary-bg: #272A3D;    /* Card background (.register-box) */
      --border-color: #4B5563;    /* Input borders and dividers */
    
      /* ACCENT & FEEDBACK */
      --accent-blue: #3E82FD;     /* Bright blue primary color (Buttons, Links, Focus) */
      --focus-shadow: rgba(62, 130, 253, 0.4); /* Subtle blue glow on focus */
      --error-color: #EF4444;     /* Red for error messages */
    
      /* TYPOGRAPHY */
      --text-color: #E0E0E0;      /* Main body text (light gray) */
      --light-text: #9CA3AF;      /* Lighter text (Labels, hints, placeholders) */

      --accent-color: #00bcd4; /* Teal */
      --card-bg: #1e1e1e; /* Darker card base */
      --border-color: #333;
    
  }