/*
 * Toms Brand Theme for LibreChat
 * Based on Toms brand guidelines
 *
 * Brand Colors:
 * - Toms Choc Brown: #512f2e (primary text, brand identity)
 * - Toms Red: #ee2a24 (accent, calls-to-action)
 * - Toms Sand: #d6d2c4 (secondary surfaces)
 * - Toms Blue: #41b6e6 (info, links)
 * - Toms Green: #009a44 (success states)
 * - Skildpadde Yellow: #ffcd00 (warnings)
 */

/* ============================================
   Toms Base Colors
   ============================================ */
:root {
  /* Toms Brand Colors */
  --toms-choc-brown: #512f2e;
  --toms-red: #ee2a24;
  --toms-sand: #d6d2c4;
  --toms-warm-sand: #d9c89e;
  --toms-blue: #41b6e6;
  --toms-green: #009a44;
  --toms-green-light: #4bc889;
  --toms-yellow: #ffcd00;

  /* Light mode neutrals */
  --toms-bg-light: #efefea;
  --toms-surface-light: #ffffff;
  --toms-text-light: #f5efe8;

  /* Dark mode neutrals */
  --toms-bg-dark: #1d1413;
  --toms-surface-dark: #2a1d1c;
  --toms-surface-dark-alt: #3a2625;
  --toms-surface-dark-elevated: #4a3635;
  --toms-text-dark: #f5efe8;
}

/* ============================================
   Light Mode Theme (Toms Sand)
   ============================================ */
html {
  /* Brand */
  --brand-purple: var(--toms-red) !important;

  /* Text colors */
  --text-primary: var(--toms-choc-brown) !important;
  --text-secondary: rgba(81, 47, 46, 0.7) !important;
  --text-secondary-alt: rgba(81, 47, 46, 0.6) !important;
  --text-tertiary: rgba(81, 47, 46, 0.5) !important;
  --text-warning: var(--toms-yellow) !important;

  /* Ring/Focus colors */
  --ring-primary: var(--toms-blue) !important;

  /* Header */
  --header-primary: var(--toms-surface-light) !important;
  --header-hover: var(--toms-sand) !important;
  --header-button-hover: #ccc8ba !important; /* Slightly darker sand */

  /* Surfaces */
  --surface-active: #c6c2b4 !important; /* Active sand */
  --surface-active-alt: var(--toms-sand) !important;
  --surface-hover: var(--toms-sand) !important;
  --surface-hover-alt: #ccc8ba !important;
  --surface-primary: var(--toms-surface-light) !important;
  --surface-primary-alt: var(--toms-bg-light) !important;
  --surface-primary-contrast: var(--toms-sand) !important;
  --surface-secondary: var(--toms-bg-light) !important;
  --surface-secondary-alt: var(--toms-sand) !important;
  --surface-tertiary: var(--toms-sand) !important;
  --surface-tertiary-alt: var(--toms-surface-light) !important;
  --surface-dialog: var(--toms-surface-light) !important;
  --surface-chat: var(--toms-surface-light) !important;

  /* Action colors */
  --surface-submit: var(--toms-red) !important;
  --surface-submit-hover: #d42620 !important; /* Darker red */
  --surface-destructive: #b91c1c !important; /* Keep destructive distinct from submit */
  --surface-destructive-hover: #991b1b !important;

  /* Borders */
  --border-light: rgba(81, 47, 46, 0.08) !important;
  --border-medium: rgba(81, 47, 46, 0.12) !important;
  --border-medium-alt: rgba(81, 47, 46, 0.15) !important;
  --border-heavy: rgba(81, 47, 46, 0.2) !important;
  --border-xheavy: rgba(81, 47, 46, 0.3) !important;

  /* Shadcn/ui utility colors (HSL format) */
  --background: 54 17% 93% !important; /* #efefea in HSL */
  --foreground: 3 27% 25% !important; /* #512f2e in HSL */
  --card: 0 0% 100% !important;
  --card-foreground: 3 27% 25% !important;
  --primary: 2 93% 53% !important; /* Toms Red in HSL */
  --primary-foreground: 0 0% 100% !important;
  --secondary: 40 20% 82% !important; /* Toms Sand in HSL */
  --secondary-foreground: 3 27% 25% !important;
  --muted: 54 17% 93% !important;
  --muted-foreground: 3 27% 45% !important;
  --accent: 2 93% 53% !important; /* Toms Red */
  --accent-foreground: 0 0% 100% !important;
  --destructive: 0 84.2% 60.2% !important;
  --destructive-foreground: 0 0% 98% !important;
  --border: 3 27% 25% / 0.12 !important;
  --input: 3 27% 25% / 0.12 !important;
  --ring: 197 70% 58% !important; /* Toms Blue */
}

/* ============================================
   Dark Mode Theme (Toms Chocolate)
   ============================================ */
.dark {
  /* Brand */
  --brand-purple: var(--toms-red) !important;

  /* Text colors */
  --text-primary: var(--toms-text-dark) !important;
  --text-secondary: rgba(245, 239, 232, 0.7) !important;
  --text-secondary-alt: rgba(245, 239, 232, 0.6) !important;
  --text-tertiary: rgba(245, 239, 232, 0.5) !important;
  --text-warning: var(--toms-yellow) !important;

  /* Ring/Focus */
  --ring-primary: var(--toms-blue) !important;

  /* Header */
  --header-primary: var(--toms-surface-dark) !important;
  --header-hover: var(--toms-surface-dark-alt) !important;
  --header-button-hover: var(--toms-surface-dark-elevated) !important;

  /* Surfaces */
  --surface-active: var(--toms-surface-dark-elevated) !important;
  --surface-active-alt: var(--toms-surface-dark-alt) !important;
  --surface-hover: var(--toms-surface-dark-alt) !important;
  --surface-hover-alt: var(--toms-surface-dark-elevated) !important;
  --surface-primary: var(--toms-bg-dark) !important;
  --surface-primary-alt: var(--toms-surface-dark) !important;
  --surface-primary-contrast: var(--toms-surface-dark) !important;
  --surface-secondary: var(--toms-surface-dark) !important;
  --surface-secondary-alt: var(--toms-surface-dark-alt) !important;
  --surface-tertiary: var(--toms-surface-dark-alt) !important;
  --surface-tertiary-alt: var(--toms-surface-dark-elevated) !important;
  --surface-dialog: var(--toms-surface-dark) !important;
  --surface-chat: var(--toms-surface-dark-alt) !important;

  /* Action colors */
  --surface-submit: var(--toms-red) !important;
  --surface-submit-hover: #d42620 !important;
  --surface-destructive: #991b1b !important;
  --surface-destructive-hover: #7f1d1d !important;

  /* Borders */
  --border-light: rgba(245, 239, 232, 0.06) !important;
  --border-medium: rgba(245, 239, 232, 0.08) !important;
  --border-medium-alt: rgba(245, 239, 232, 0.1) !important;
  --border-heavy: rgba(245, 239, 232, 0.15) !important;
  --border-xheavy: rgba(245, 239, 232, 0.2) !important;

  /* Shadcn/ui utility colors (HSL format) */
  --background: 7 13% 10% !important; /* #1d1413 in HSL */
  --foreground: 33 30% 92% !important; /* #f5efe8 in HSL */
  --card: 7 15% 13% !important; /* #2a1d1c */
  --card-foreground: 33 30% 92% !important;
  --primary: 2 93% 53% !important; /* Toms Red */
  --primary-foreground: 0 0% 100% !important;
  --secondary: 7 17% 18% !important; /* #3a2625 */
  --secondary-foreground: 33 30% 92% !important;
  --muted: 7 17% 18% !important;
  --muted-foreground: 33 30% 65% !important;
  --accent: 2 93% 53% !important; /* Toms Red */
  --accent-foreground: 0 0% 100% !important;
  --destructive: 0 62.8% 40.6% !important;
  --destructive-foreground: 0 0% 98% !important;
  --border: 245 239 232 / 0.08 !important;
  --input: 245 239 232 / 0.08 !important;
  --ring: 197 70% 58% !important; /* Toms Blue */
}

/* ============================================
   Additional Toms Branding Tweaks
   ============================================ */

/* Success states use Toms Green */
html .text-green-600,
html .bg-green-600,
html .border-green-600 {
  color: var(--toms-green) !important;
  background-color: var(--toms-green) !important;
  border-color: var(--toms-green) !important;
}

.dark .text-green-600,
.dark .bg-green-600,
.dark .border-green-600 {
  color: var(--toms-green-light) !important;
  background-color: var(--toms-green-light) !important;
  border-color: var(--toms-green-light) !important;
}

/* Info/links use Toms Blue */
html .text-blue-600,
html .bg-blue-600,
html .border-blue-600 {
  color: var(--toms-blue) !important;
  background-color: var(--toms-blue) !important;
  border-color: var(--toms-blue) !important;
}

.dark .text-blue-600,
.dark .bg-blue-600,
.dark .border-blue-600 {
  color: var(--toms-blue) !important;
  background-color: var(--toms-blue) !important;
  border-color: var(--toms-blue) !important;
}

/* Body background */
body {
  background-color: var(--surface-primary) !important;
}

/* Smooth transitions for theme switching */
* {
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

/* Focus rings use Toms Blue */
*:focus-visible {
  outline-color: var(--toms-blue) !important;
  outline-width: 2px !important;
  outline-style: solid !important;
}