/* Cyan Colors - Custom CSS for #008797 theme */

/* Background Colors */
.bg-cyan-50 { background-color: #ecfeff; }
.bg-cyan-100 { background-color: #cffafe; }
.bg-cyan-200 { background-color: #a5f3fc; }
.bg-cyan-300 { background-color: #67e8f9; }
.bg-cyan-400 { background-color: #22d3ee; }
.bg-cyan-500 { background-color: #06b6d4; }
.bg-cyan-600 { background-color: #008797; } /* Main color */
.bg-cyan-700 { background-color: #0e7490; }
.bg-cyan-800 { background-color: #155e75; }
.bg-cyan-900 { background-color: #164e63; }

/* Text Colors */
.text-cyan-50 { color: #ecfeff; }
.text-cyan-100 { color: #cffafe; }
.text-cyan-200 { color: #a5f3fc; }
.text-cyan-300 { color: #67e8f9; }
.text-cyan-400 { color: #22d3ee; }
.text-cyan-500 { color: #06b6d4; }
.text-cyan-600 { color: #008797; } /* Main color */
.text-cyan-700 { color: #0e7490; }
.text-cyan-800 { color: #155e75; }
.text-cyan-900 { color: #164e63; }

/* Border Colors */
.border-cyan-50 { border-color: #ecfeff; }
.border-cyan-100 { border-color: #cffafe; }
.border-cyan-200 { border-color: #a5f3fc; }
.border-cyan-300 { border-color: #67e8f9; }
.border-cyan-400 { border-color: #22d3ee; }
.border-cyan-500 { border-color: #06b6d4; }
.border-cyan-600 { border-color: #008797; } /* Main color */
.border-cyan-700 { border-color: #0e7490; }
.border-cyan-800 { border-color: #155e75; }
.border-cyan-900 { border-color: #164e63; }

/* Ring Colors (Focus) */
.ring-cyan-50 { --tw-ring-color: #ecfeff; }
.ring-cyan-100 { --tw-ring-color: #cffafe; }
.ring-cyan-200 { --tw-ring-color: #a5f3fc; }
.ring-cyan-300 { --tw-ring-color: #67e8f9; }
.ring-cyan-400 { --tw-ring-color: #22d3ee; }
.ring-cyan-500 { --tw-ring-color: #06b6d4; }
.ring-cyan-600 { --tw-ring-color: #008797; } /* Main color */
.ring-cyan-700 { --tw-ring-color: #0e7490; }
.ring-cyan-800 { --tw-ring-color: #155e75; }
.ring-cyan-900 { --tw-ring-color: #164e63; }

/* Focus Ring Colors */
.focus\:ring-cyan-50:focus { --tw-ring-color: #ecfeff; }
.focus\:ring-cyan-100:focus { --tw-ring-color: #cffafe; }
.focus\:ring-cyan-200:focus { --tw-ring-color: #a5f3fc; }
.focus\:ring-cyan-300:focus { --tw-ring-color: #67e8f9; }
.focus\:ring-cyan-400:focus { --tw-ring-color: #22d3ee; }
.focus\:ring-cyan-500:focus { --tw-ring-color: #06b6d4; }
.focus\:ring-cyan-600:focus { --tw-ring-color: #008797; } /* Main color */
.focus\:ring-cyan-700:focus { --tw-ring-color: #0e7490; }
.focus\:ring-cyan-800:focus { --tw-ring-color: #155e75; }
.focus\:ring-cyan-900:focus { --tw-ring-color: #164e63; }

/* Hover Background Colors */
.hover\:bg-cyan-50:hover { background-color: #ecfeff; }
.hover\:bg-cyan-100:hover { background-color: #cffafe; }
.hover\:bg-cyan-200:hover { background-color: #a5f3fc; }
.hover\:bg-cyan-300:hover { background-color: #67e8f9; }
.hover\:bg-cyan-400:hover { background-color: #22d3ee; }
.hover\:bg-cyan-500:hover { background-color: #06b6d4; }
.hover\:bg-cyan-600:hover { background-color: #008797; } /* Main color */
.hover\:bg-cyan-700:hover { background-color: #0e7490; }
.hover\:bg-cyan-800:hover { background-color: #155e75; }
.hover\:bg-cyan-900:hover { background-color: #164e63; }

/* Hover Text Colors */
.hover\:text-cyan-50:hover { color: #ecfeff; }
.hover\:text-cyan-100:hover { color: #cffafe; }
.hover\:text-cyan-200:hover { color: #a5f3fc; }
.hover\:text-cyan-300:hover { color: #67e8f9; }
.hover\:text-cyan-400:hover { color: #22d3ee; }
.hover\:text-cyan-500:hover { color: #06b6d4; }
.hover\:text-cyan-600:hover { color: #008797; } /* Main color */
.hover\:text-cyan-700:hover { color: #0e7490; }
.hover\:text-cyan-800:hover { color: #155e75; }
.hover\:text-cyan-900:hover { color: #164e63; }

/* Hover Border Colors */
.hover\:border-cyan-50:hover { border-color: #ecfeff; }
.hover\:border-cyan-100:hover { border-color: #cffafe; }
.hover\:border-cyan-200:hover { border-color: #a5f3fc; }
.hover\:border-cyan-300:hover { border-color: #67e8f9; }
.hover\:border-cyan-400:hover { border-color: #22d3ee; }
.hover\:border-cyan-500:hover { border-color: #06b6d4; }
.hover\:border-cyan-600:hover { border-color: #008797; } /* Main color */
.hover\:border-cyan-700:hover { border-color: #0e7490; }
.hover\:border-cyan-800:hover { border-color: #155e75; }
.hover\:border-cyan-900:hover { border-color: #164e63; }

/* Focus Background Colors */
.focus\:bg-cyan-50:focus { background-color: #ecfeff; }
.focus\:bg-cyan-100:focus { background-color: #cffafe; }
.focus\:bg-cyan-200:focus { background-color: #a5f3fc; }
.focus\:bg-cyan-300:focus { background-color: #67e8f9; }
.focus\:bg-cyan-400:focus { background-color: #22d3ee; }
.focus\:bg-cyan-500:focus { background-color: #06b6d4; }
.focus\:bg-cyan-600:focus { background-color: #008797; } /* Main color */
.focus\:bg-cyan-700:focus { background-color: #0e7490; }
.focus\:bg-cyan-800:focus { background-color: #155e75; }
.focus\:bg-cyan-900:focus { background-color: #164e63; }

/* Focus Text Colors */
.focus\:text-cyan-50:focus { color: #ecfeff; }
.focus\:text-cyan-100:focus { color: #cffafe; }
.focus\:text-cyan-200:focus { color: #a5f3fc; }
.focus\:text-cyan-300:focus { color: #67e8f9; }
.focus\:text-cyan-400:focus { color: #22d3ee; }
.focus\:text-cyan-500:focus { color: #06b6d4; }
.focus\:text-cyan-600:focus { color: #008797; } /* Main color */
.focus\:text-cyan-700:focus { color: #0e7490; }
.focus\:text-cyan-800:focus { color: #155e75; }
.focus\:text-cyan-900:focus { color: #164e63; }

/* Additional ring utilities for compatibility */
.ring-2 { 
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

/* Initialize ring variables */
* {
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
}
