/* ============================================================
   Focus AI theme — Focus Camera Design System (Brand/design-system.md)
   Loaded after LibreChat's bundle via index.html, so plain
   overrides win the cascade.
   Palette: Focus Red #D4242F (hover #DD525A), Navy #333F48,
   Link Blue #09769E, neutrals F9F9F9/F4F4F4, DM Sans.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap');

/* ---------- Typography ---------- */
html, body, #root {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif !important;
}

/* ---------- Light theme (default) ---------- */
:root, html {
  --brand-purple: #D4242F;            /* LibreChat brand accent slot */
  --surface-submit: #D4242F;          /* send button */
  --surface-submit-hover: #DD525A;    /* send button hover */
  --surface-destructive: #B71C26;
  --surface-destructive-hover: #D4242F;
  --text-warning: #B45309;
  /* shadcn-style slots used by newer components */
  --primary: 354 71% 48%;             /* Focus Red in HSL parts */
  --ring: 354 71% 48%;
}

/* Light surfaces per design system neutrals */
html:not(.dark) {
  --surface-primary: #FFFFFF;
  --surface-primary-alt: #F9F9F9;
  --surface-secondary: #F9F9F9;
  --surface-tertiary: #F4F4F4;
  --text-primary: #000000;
  --text-secondary: #2A2B2A;
  --text-tertiary: #333333;
}

/* ---------- Dark theme: Focus Navy base ---------- */
.dark {
  --brand-purple: #D4242F;
  --surface-submit: #D4242F;
  --surface-submit-hover: #DD525A;
  --surface-primary: #333F48;         /* Focus Navy */
  --surface-primary-alt: #2B353D;
  --surface-secondary: #2B353D;
  --surface-tertiary: #242C33;
  --surface-chat: #333F48;
  --surface-dialog: #2B353D;
  --surface-hover: #3E4C57;
  --surface-active: #46555F;
  --border-light: #46555F;
  --border-medium: #4E5E69;
  --header-primary: #FFFFFF;
}

/* ---------- Links ---------- */
.markdown a, .prose a, a.underline, p a {
  color: #09769E;
}
.dark .markdown a, .dark .prose a, .dark a.underline, .dark p a {
  color: #5BB8D4;
}

/* ---------- Buttons / radius (design system: 6px) ---------- */
button[type="submit"], .btn, .btn-primary {
  border-radius: 6px;
}
.btn-primary {
  background-color: #D4242F;
  color: #FFFFFF;
}
.btn-primary:hover {
  background-color: #DD525A;
}
.btn-secondary {
  background-color: #333F48;
  color: #FFFFFF;
}

/* ---------- Send button (uses bg-text-primary utility, so target directly) ---------- */
button[data-testid="send-button"]:not(:disabled) {
  background-color: #D4242F !important;
  color: #FFFFFF !important;
}
button[data-testid="send-button"]:not(:disabled):hover {
  background-color: #DD525A !important;
}

/* ---------- Details ---------- */
::selection { background: #D4242F; color: #FFFFFF; }
*:focus-visible { outline-color: #D4242F; }

/* ============================================================
   Red-forward accents — Focus Red (#D4242F) is the PRIMARY brand
   color, so lead with it. Light theme tints hover/active surfaces
   red instead of grey; primary-action icons render in Focus Red.
   ============================================================ */

/* Light theme: red-tinted hover + selected/active surfaces */
html:not(.dark) {
  --surface-hover: #FBECEC;       /* soft red hover (was light grey) */
  --surface-active: #F6DCDE;      /* selected chat row */
  --surface-active-alt: #F6DCDE;  /* selected nav icon + control hover */
}

/* New chat = the primary action → its icon is always Focus Red */
a[data-testid="new-chat-button"] svg { color: #D4242F !important; }

/* Nav controls turn Focus Red on hover */
a[data-testid="new-chat-button"]:hover svg,
button[data-testid="nav-user"]:hover svg,
button[data-testid="presets-button"]:hover svg,
button[data-testid="add-multi-convo-button"]:hover svg,
button[data-testid="open-sidebar-button"]:hover svg,
button[data-testid="close-sidebar-button"]:hover svg { color: #D4242F !important; }