:root {
  /* ========== PRIMARY BLUE PALETTE ========== */
  --color-dark-blue: #1d4ed8; /* Buttons, headers, primary actions */
  --color-mid-blue: #2d5ec0; /* Hover states, gradients */
  --color-light-blue: #3b82f6; /* Accents, focus states, links */

  /* Blue opacity variants */
  --color-light-blue-light: #3b82f61a; /* 10% - subtle shadows, backgrounds */
  --color-light-blue-medium: #3b82f633; /* 20% - borders, focus rings */
  --color-light-blue-strong: #3b82f64d; /* 30% - emphasized borders, shadows */
  --color-mid-blue-51: #2d5ec083; /* 51% - carousel buttons */

  /* ========== TEXT COLOR HIERARCHY ========== */
  --color-text-primary: #2c3e50; /* Body text, labels, primary content */
  --color-text-secondary: #475569; /* Navigation links, secondary content */
  --color-text-tertiary: #64748b; /* Placeholder text, subtle content */
  --color-text-dark: #1e293b; /* Section headings, dark text */
  --color-text-darker: #334155; /* Service details text */
  --color-text-muted: #777777; /* Disabled states, "No results" */

  /* ========== BACKGROUND COLORS ========== */
  --color-bg-white: #ffffff; /* Card backgrounds, button text */
  --color-bg-light: #f8fafc; /* Body background gradient top */
  --color-bg-lighter: #e2e8f0; /* Body background gradient bottom */
  --color-bg-subtle: #f8f9fa; /* Subtle backgrounds */

  /* White opacity variants */
  --color-bg-white-90: #ffffffe6; /* 90% - service content backgrounds */
  --color-bg-white-95: #fffffff2; /* 95% - navbar backgrounds */

  /* ========== BORDER COLORS ========== */
  --color-border-light: #e1e8ed; /* Input borders, light borders */
  --color-border-gray: #6b7280; /* Standard gray borders */
  --color-border-slate: #cbd5e1; /* Multiselect control hover */

  /* ========== MULTISELECT COMPONENT (Tailwind blue scale) ========== */
  --color-blue-50: #eff6ff; /* List item hover background */
  --color-blue-100: #dbeafe; /* Tag background */
  --color-blue-200: #bfdbfe; /* Tag hover background */
  --color-blue-800: #1e40af; /* Tag text, button hover */

  /* ========== SUCCESS/FEEDBACK COLORS ========== */
  --color-success-bg: #d4edda; /* Success message background */
  --color-success-border: #c3e6cb; /* Success message border */
  --color-success-text: #155724; /* Success message text */
  --color-error-text: #dc3545; /* Error messages (Bootstrap red) */

  /* ========== LAYOUT & EFFECTS ========== */
  --radius: 10px;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.08);
}