:root {
  /* Turquoise */
  --color-turquoise-50: #EAFFFF;
  --color-turquoise-100: #D6FFFF;
  --color-turquoise-200: #ABEFEE;
  --color-turquoise-300: #78D4D3;
  --color-turquoise-400: #47BAB9;
  --color-turquoise-500: #0AAEA5;
  --color-turquoise-600: #0DA098;
  --color-turquoise-700: #0A827C;
  --color-turquoise-800: #086B66;
  --color-turquoise-900: #075551;

  /* Orange */
  --color-orange-50: #FFE2D0;
  --color-orange-100: #FFC19A;
  --color-orange-200: #FFA46A;
  --color-orange-300: #FF8F4A;
  --color-orange-400: #FF7C2C;
  --color-orange-500: #FF721C;
  --color-orange-600: #E66718;
  --color-orange-700: #CA5914;
  --color-orange-800: #A24810;
  --color-orange-900: #71330D;

  /* BlueGray */
  --color-bluegray-50: #F8FAFC;
  --color-bluegray-100: #F1F5F9;
  --color-bluegray-200: #E5EDF9;
  --color-bluegray-300: #B8C8DF;
  --color-bluegray-400: #94A3B8;
  --color-bluegray-500: #64748B;
  --color-bluegray-600: #475569;
  --color-bluegray-700: #334155;
  --color-bluegray-800: #1E293B;
  --color-bluegray-900: #0F172A;

  /* Red */
  --color-red-50: #FEF2F2;
  --color-red-100: #FEE2E2;
  --color-red-200: #FECACA;
  --color-red-300: #FCA5A5;
  --color-red-400: #F87171;
  --color-red-500: #EF4444;
  --color-red-600: #DC2626;
  --color-red-700: #B91C1C;
  --color-red-800: #991B1B;
  --color-red-900: #7F1D1D;

  /* Semantic Colors */
  --color-primary: var(--color-turquoise-500);
  --color-primary-hover: var(--color-turquoise-600);
  --color-secondary: var(--color-orange-500);
  --color-secondary-hover: var(--color-orange-600);
  --color-bg-light: var(--color-bluegray-50);
  --color-text-main: var(--color-bluegray-900);
  --color-text-muted: var(--color-bluegray-600);
  --color-card-bg: #FFFFFF;
  --color-border: var(--color-bluegray-200);

  /* Typography */
  --font-family: 'Outfit', sans-serif;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-glass: 0 8px 32px 0 rgba(10, 174, 165, 0.15); /* Turquoise shadow for glassmorphism */

  /* Glassmorphism Variables */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-blur: blur(10px);
  
  /* Radii */
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
}