:root {
    /* Main brand colors - cyan/blue theme */
    --primary-color: #01ddff;       /* Bright cyan - main brand color */
    --primary-dark: #00a8c6;        /* Darker cyan for hover states and depth */
    --primary-light: #7aeeff;       /* Lighter cyan for subtle highlights */
    
    /* Complementary accent colors */
    --accent-color: #0055a4;        /* Deep blue - complementary to cyan */
    --accent-light: #2b7bbd;        /* Lighter blue for secondary elements */
    
    /* Neutral background colors */
    --bg-light: #f7fdff;            /* Very light cyan tint for backgrounds */
    --bg-medium: #e6f9fd;           /* Light cyan tint for card backgrounds */
    
    /* Text colors with good contrast */
    --text-dark: #003a54;           /* Dark blue-gray for primary text */
    --text-medium: #005f7f;         /* Medium blue for secondary text */
    --text-on-dark: #ffffff;        /* White text for dark backgrounds */
    
    /* System colors */
    --white: #ffffff;
    --off-white: #f8f8f8;
    --light-gray: #f1f1f1;
    --medium-gray: #e0e0e0;
    --dark-gray: #333333;
    --black: #1a1a1a;
    --overlay: rgba(0, 0, 0, 0.7);
    
    /* Success/Error colors */
    --success: #00c48c;             /* Green for success messages */
    --error: #ff5a5f;               /* Red for error messages */
    --warning: #ffbb54;             /* Orange/yellow for warnings */
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background-color: var(--background);
  color: var(--text-dark);
  line-height: 1.6;
}