/* Carbon One Brand Theme - Complete UI Override */
/* Earthy teal palette throughout the entire application */

/* Brand Colors:
   - Dark teal: #204348
   - Medium teal: #2D5452
   - Light teal: #6C9794
   - Bright yellow: #F0E538
   - Light yellow: #EBEA7A
   - Off-white: #ECECE8
*/

/* ========== TAILWIND CLASS OVERRIDES ========== */
/* These override compiled Tailwind classes that use static colors */

/* Light mode backgrounds */
.bg-white {
  background-color: #ECECE8 !important;
}

.bg-gray-50 {
  background-color: #e0e5e4 !important;
}

.bg-gray-100 {
  background-color: #d4dbd9 !important;
}

.bg-gray-200 {
  background-color: #c8d2d0 !important;
}

/* Dark mode backgrounds */
.dark .dark\:bg-gray-900,
.dark.bg-gray-900 {
  background-color: #0f2122 !important;
}

.dark .dark\:bg-gray-850,
.dark.bg-gray-850 {
  background-color: #152c2d !important;
}

.dark .dark\:bg-gray-800,
.dark.bg-gray-800 {
  background-color: #1a3638 !important;
}

.dark .dark\:bg-gray-700,
.dark.bg-gray-700 {
  background-color: #204348 !important;
}

.dark .dark\:bg-gray-600,
.dark.bg-gray-600 {
  background-color: #264745 !important;
}

/* Text colors - light mode */
.text-black {
  color: #204348 !important;
}

.text-gray-800 {
  color: #1a3638 !important;
}

.text-gray-700 {
  color: #204348 !important;
}

.text-gray-600 {
  color: #2D5452 !important;
}

.text-gray-500 {
  color: #4a7d7a !important;
}

/* Text colors - dark mode */
.dark .dark\:text-white,
.dark.text-white {
  color: #ECECE8 !important;
}

.dark .dark\:text-gray-100,
.dark.text-gray-100 {
  color: #ECECE8 !important;
}

.dark .dark\:text-gray-200,
.dark.text-gray-200 {
  color: #d4dbd9 !important;
}

.dark .dark\:text-gray-300,
.dark.text-gray-300 {
  color: #c8d2d0 !important;
}

.dark .dark\:text-gray-400,
.dark.text-gray-400 {
  color: #6C9794 !important;
}

/* Border colors - light mode */
.border-gray-200 {
  border-color: #c8d2d0 !important;
}

.border-gray-300 {
  border-color: #b0bfbc !important;
}

/* Border colors - dark mode */
.dark .dark\:border-gray-600,
.dark.border-gray-600 {
  border-color: #264745 !important;
}

.dark .dark\:border-gray-700,
.dark.border-gray-700 {
  border-color: #204348 !important;
}

/* Hover states - light mode */
.hover\:bg-gray-50:hover {
  background-color: #d4dbd9 !important;
}

.hover\:bg-gray-100:hover {
  background-color: #c8d2d0 !important;
}

.hover\:bg-gray-200:hover {
  background-color: #b0bfbc !important;
}

/* Hover states - dark mode */
.dark .dark\:hover\:bg-gray-700:hover,
.dark.hover\:bg-gray-700:hover {
  background-color: #264745 !important;
}

.dark .dark\:hover\:bg-gray-600:hover,
.dark.hover\:bg-gray-600:hover {
  background-color: #2D5452 !important;
}

/* ========== CSS VARIABLE OVERRIDES ========== */

:root, html {
  /* Base grays -> teal tones */
  --white: #ECECE8 !important;
  --gray-20: #e0e5e4 !important;
  --gray-50: #d4dbd9 !important;
  --gray-100: #c8d2d0 !important;
  --gray-200: #b0bfbc !important;
  --gray-300: #6C9794 !important;
  --gray-400: #4a7d7a !important;
  --gray-500: #2D5452 !important;
  --gray-600: #264745 !important;
  --gray-700: #204348 !important;
  --gray-800: #1a3638 !important;
  --gray-850: #152c2d !important;
  --gray-900: #0f2122 !important;

  /* Green palette */
  --green-700: #2D5452 !important;
  --green-800: #204348 !important;

  /* Brand purple -> teal */
  --brand-purple: #2D5452 !important;

  /* Surface colors */
  --presentation: #ECECE8 !important;
  --surface-primary: #ECECE8 !important;
  --surface-primary-alt: #e0e5e4 !important;
  --surface-primary-contrast: #d4dbd9 !important;
  --surface-secondary: #e0e5e4 !important;
  --surface-secondary-alt: #d4dbd9 !important;
  --surface-tertiary: #d4dbd9 !important;
  --surface-tertiary-alt: #ECECE8 !important;
  --surface-dialog: #ECECE8 !important;
  --surface-chat: #ECECE8 !important;
  --surface-hover: #c8d2d0 !important;
  --surface-hover-alt: #b0bfbc !important;
  --surface-active: #c8d2d0 !important;
  --surface-active-alt: #b0bfbc !important;

  /* Submit button */
  --surface-submit: #2D5452 !important;
  --surface-submit-hover: #204348 !important;

  /* Header */
  --header-primary: #ECECE8 !important;
  --header-hover: #d4dbd9 !important;
  --header-button-hover: #d4dbd9 !important;

  /* Text colors */
  --text-primary: #204348 !important;
  --text-secondary: #2D5452 !important;
  --text-secondary-alt: #4a7d7a !important;
  --text-tertiary: #6C9794 !important;

  /* Borders */
  --border-light: #c8d2d0 !important;
  --border-medium: #b0bfbc !important;
  --border-medium-alt: #b0bfbc !important;
  --border-heavy: #6C9794 !important;
  --border-xheavy: #4a7d7a !important;

  /* Ring/focus */
  --ring-primary: #2D5452 !important;

  /* Yellow accents */
  --amber-400: #F0E538 !important;
  --amber-500: #F0E538 !important;
  --text-warning: #F0E538 !important;
}

/* ========== DARK MODE ========== */
.dark {
  /* Base grays -> dark teal tones */
  --white: #ECECE8 !important;
  --gray-20: #1a3638 !important;
  --gray-50: #152c2d !important;
  --gray-100: #0f2122 !important;
  --gray-200: #1a3638 !important;
  --gray-300: #264745 !important;
  --gray-400: #6C9794 !important;
  --gray-500: #b0bfbc !important;
  --gray-600: #c8d2d0 !important;
  --gray-700: #204348 !important;
  --gray-800: #1a3638 !important;
  --gray-850: #152c2d !important;
  --gray-900: #0f2122 !important;

  /* Green palette */
  --green-700: #2D5452 !important;
  --green-800: #204348 !important;

  /* Brand purple -> light teal */
  --brand-purple: #6C9794 !important;

  /* Surface colors - dark teal */
  --presentation: #1a3638 !important;
  --surface-primary: #0f2122 !important;
  --surface-primary-alt: #152c2d !important;
  --surface-primary-contrast: #152c2d !important;
  --surface-secondary: #1a3638 !important;
  --surface-secondary-alt: #1a3638 !important;
  --surface-tertiary: #204348 !important;
  --surface-tertiary-alt: #204348 !important;
  --surface-dialog: #152c2d !important;
  --surface-chat: #204348 !important;
  --surface-hover: #264745 !important;
  --surface-hover-alt: #264745 !important;
  --surface-active: #2D5452 !important;
  --surface-active-alt: #204348 !important;

  /* Submit button */
  --surface-submit: #2D5452 !important;
  --surface-submit-hover: #6C9794 !important;

  /* Header */
  --header-primary: #204348 !important;
  --header-hover: #264745 !important;
  --header-button-hover: #204348 !important;

  /* Text colors */
  --text-primary: #ECECE8 !important;
  --text-secondary: #c8d2d0 !important;
  --text-secondary-alt: #b0bfbc !important;
  --text-tertiary: #6C9794 !important;

  /* Borders */
  --border-light: #204348 !important;
  --border-medium: #264745 !important;
  --border-medium-alt: #264745 !important;
  --border-heavy: #2D5452 !important;
  --border-xheavy: #6C9794 !important;

  /* Ring/focus */
  --ring-primary: #6C9794 !important;

  /* Yellow accents */
  --amber-400: #EBEA7A !important;
  --amber-500: #F0E538 !important;
  --text-warning: #EBEA7A !important;
}

/* ========== ADDITIONAL ELEMENT STYLES ========== */

/* Scrollbar */
::-webkit-scrollbar-thumb {
  background-color: #6C9794 !important;
}

.dark ::-webkit-scrollbar-thumb {
  background-color: #2D5452 !important;
}

/* Selection */
::selection {
  background-color: #6C9794 !important;
  color: #ECECE8 !important;
}

.dark ::selection {
  background-color: #2D5452 !important;
  color: #ECECE8 !important;
}

/* Focus rings and outlines */
*:focus-visible {
  outline-color: #2D5452 !important;
}

.dark *:focus-visible {
  outline-color: #6C9794 !important;
}

/* Input focus states - subtle/no outline */
input:focus,
textarea:focus,
[contenteditable="true"]:focus {
  outline: none !important;
  border-color: #b0bfbc !important;
  --tw-ring-color: transparent !important;
  box-shadow: none !important;
}

.dark input:focus,
.dark textarea:focus,
.dark [contenteditable="true"]:focus {
  outline: none !important;
  border-color: #264745 !important;
  --tw-ring-color: transparent !important;
  box-shadow: none !important;
}

/* Ring color overrides */
.ring-black {
  --tw-ring-color: #2D5452 !important;
}

.focus\:ring-black:focus {
  --tw-ring-color: #2D5452 !important;
}

.focus-within\:ring-black:focus-within {
  --tw-ring-color: #2D5452 !important;
}

.dark .dark\:ring-white {
  --tw-ring-color: #6C9794 !important;
}

.dark .dark\:focus\:ring-white:focus {
  --tw-ring-color: #6C9794 !important;
}