:root {
  /* Breakpoint Variables - Single Source of Truth */
  --screen-sm: 640px;
  --screen-md: 768px;
  --screen-lg: 960px;
  --screen-xl: 1024px;
  --screen-2xl: 1280px;
  --screen-3xl: 1536px;

  /* Brand Colors from Webflow */
  --primary: #477674;      /* Teal color for headers and buttons */
  --secondary: #8fc7d9;    /* Light blue accent color */
  --cream: #f6f7ec;       /* Background color */
  --paragraph-gray: #5d5d5d;  /* Text color */
  --light-gray: #e0e0e0;   /* Light gray accents */
  
  /* Semantic Colors */
  --bg-primary: var(--cream);
  --bg-secondary: white;
  --bg-tertiary: var(--light-gray);
  
  /* Text Colors */
  --text-primary: var(--primary);
  --text-secondary: var(--paragraph-gray);
  --text-tertiary: var(--light-gray);
  
  /* Border Colors */
  --border-primary: var(--secondary);
  --border-secondary: var(--light-gray);
  
  /* Button Colors */
  --btn-primary-bg: var(--primary);
  --btn-primary-text: white;
  --btn-secondary-bg: var(--secondary);
  --btn-secondary-text: var(--primary);
  
  /* Status Colors */
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #dc2626;
  --info: var(--secondary);
}

/* Base Styles */
body {
  background-color: var(--bg-primary);
  color: var(--text-secondary);
}

/* Navbar */
.navbar.bg-light {
  background-color: var(--bg-primary) !important;
  border-bottom: 1px solid var(--border-secondary);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
}

/* Links */
a {
  color: var(--primary);
  transition: color 0.2s ease;
}

a:hover {
  color: color-mix(in srgb, var(--primary) 80%, black);
}

/* Buttons */
.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  transition: background-color 0.2s ease;
}

.btn-primary:hover {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 85%, black);
}

.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  transition: background-color 0.2s ease;
}

.btn-secondary:hover {
  background-color: color-mix(in srgb, var(--btn-secondary-bg) 85%, black);
}

/* Cards */
.card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
}

/* Form Elements */
input, select, textarea {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  color: var(--text-secondary);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* Bootstrap Navbar Overrides */
.navbar.bg-light {
  background-color: var(--bg-primary) !important;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--text-secondary);
}

.navbar-light .navbar-nav .nav-link:hover {
  color: var(--primary);
}

.dropdown-menu {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
}

.dropdown-item {
  color: var(--text-secondary);
}

.dropdown-item:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Footer Overrides */
.bg-blue-100 {
  background-color: var(--bg-tertiary);
}

/* Social Media Links */
.border-blue-300 {
  border-color: var(--secondary);
}

/* Modal Overrides */
.modal-content {
  background-color: var(--bg-secondary);
}

.modal-header {
  border-bottom-color: var(--border-secondary);
}

.modal-footer {
  border-top-color: var(--border-secondary);
}

/* UIkit Notification Overrides */
.uk-notification-message {
  background-color: var(--cream) !important;
  color: var(--primary) !important;
  border: 1px solid var(--border-secondary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.uk-notification-message-primary {
  background-color: var(--cream) !important;
  color: var(--primary) !important;
}

.uk-notification-message-success {
  background-color: var(--cream) !important;
  color: var(--success) !important;
  border-color: var(--success) !important;
}

.uk-notification-message-warning {
  background-color: var(--cream) !important;
  color: var(--warning) !important;
  border-color: var(--warning) !important;
}

.uk-notification-message-danger {
  background-color: var(--cream) !important;
  color: var(--error) !important;
  border-color: var(--error) !important;
}

/* UIkit Tooltip Overrides */
.uk-tooltip {
  background-color: var(--cream) !important;
  color: var(--primary) !important;
  border: 1px solid var(--border-secondary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.navbar.fixed-top {
  border-bottom: 1px solid var(--border-secondary);
}