/* ========== main.css ========== */
/* --- Global Reset --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --- Fonts --- */
/* Load Poppins-SemiBold */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Load Poppins-Regular */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Root Color Variables (from layout and component vars) --- */
:root {
  --color-bg: #0f162f;
  --color-card-bg: #1f223f;
  --color-card-text: #fefaff;
  --color-card-header: #ffffff;
  --color-card-desc: #a68ea8;
  --color-header: #ffffff;
  --color-header-desc: #ffffff;
  --color-nav-link: #fff;
  --color-nav-link-active: #fff;
  --color-footer: #efe9e4;
  --color-disclaimer: rgba(255,255,255,0.7);
  --color-prompt-header: #C57ED3;
  --color-prompt-desc: #3D3D3D;
  --color-prompt-bullet: #171717;
  --color-banner-bg: #0f162f;
  --color-assistant-chat-bg: #1f223f;
  --color-toggle-bg: #80718c;
  --color-toggle-thumb: #ffffff;
  --color-toggle-border: #80718c;
  /* Chat-specific variables */
  --chat-bg: #ffffff;
  --ai-message-color: #23272a;
  --user-message-bg: #FBF9F6;
  --user-message-color: #23272a;
  --assistant-card-text: #23272a;
  --assistant-card-border: #bdbdbd;
  --chat-input-border: #DAD7D3;
  --chat-input-text: var(--ai-message-color);
  --chat-input-bg: #FBF9F6;
  /* Button-specific variables */
  --scroll-btn-bg: #E8E1DA;     /* Light by default */
  --scroll-btn-text: #23272a;   
  --scroll-btn-border: #E8E1DA; 
  /* Hero Styles */
  --hero-tagline-color: #564E62;
}

/* --- Light/Dark Mode Overrides --- */
body.light-mode {
  --color-bg: #fff;
  --color-card-bg: #fbf9f6;
  --color-card-text: #8e8880;
  --color-card-header: #565451;
  --color-card-desc: #8e8880;
  --color-header: #2d1e3a;
  --color-header-desc: #2d1e3a;
  --color-nav-link: #fff;
  --color-nav-link-active: #C57ED3;
  --color-footer: #fff;
  --color-disclaimer: #80718c;
  --color-prompt-header: #C57ED3;
  --color-prompt-desc: #80718c;
  --color-prompt-bullet: #80718c;
  --color-banner-bg: #fff;
  --color-assistant-chat-bg: #fbf9f6;
  --color-toggle-bg: #C57ED3;
  --color-toggle-thumb: #fff;
  --color-toggle-border: #C57ED3;
  /* Chat-specific */
  --chat-bg: #ffffff;
  --ai-message-color: #23272a;
  --user-message-bg: #FBF9F6;
  --user-message-color: #23272a;
  --assistant-card-text: #23272a;
  --assistant-card-border: #bdbdbd;
  --chat-input-border: #DAD7D3;
  --chat-input-text: #23272a;
  --chat-input-bg: #FBF9F6;
  /* Button-specific variables */
  --scroll-btn-bg: transparent;
  --scroll-btn-text: #E8E1DA;
  --scroll-btn-border:#E8E1DA;
 /* Hero Styles */
  --hero-tagline-color: #5b5655;
  --h1-color: #565451;

}

body.dark-mode {
  --chat-bg: #0F162F;
  --ai-message-color: #f3f4f6;
  --user-message-bg: #1F223F;
  --user-message-color: #f3f4f6;
  --assistant-card-text: #f3f4f6;
  --assistant-card-border: #44474f;
  --chat-input-border: #1F223F;
  --chat-input-text: #f3f4f6;
  --chat-input-bg: #1F223F;
  --scroll-btn-bg: transparent;
  --scroll-btn-text:  #564E62;    /* adjust for contrast */
  --scroll-btn-border: #8B7DA6; 
  /* Hero Styles */ 
  --hero-tagline-color: white;
  --h1-color: white;
}

/* By default, hide dark and show light for HERO logo */
.results-logo-top.dark { display: inline; }
.results-logo-top.light { display: none; }

/* In dark mode, swap them */
body.dark-mode .results-logo-top.dark { display: none; }
body.dark-mode .results-logo-top.light { display: inline; }

/* In light mode, swap back */
body.light-mode .results-logo-top.light { display: none; }
body.light-mode .results-logo-top.dark { display: inline; }

/* By default, hide dark and show light for FOOTER logo */
.results-logo.dark { display: inline; }
.results-logo.light { display: none; }

/* In dark mode, swap them */
body.dark-mode .results-logo.dark { display: none; }
body.dark-mode .results-logo.light { display: inline; }

/* In light mode, swap back (optional, for clarity) */
body.light-mode .results-logo.light { display: none; }
body.light-mode .results-logo.dark { display: inline; }

/* --- Document Basics --- */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  line-height: 1.6;
  color: #0f162f;
  background-color: var(--color-bg);
  background-size: cover;
  background-attachment: scroll;
  padding-bottom: 56px; /* For fixed footer */
}

/* img {
  max-width: 100%;
  height: auto;
} */

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 1rem;
  line-height: 1.2;
  font-weight: 600;
  font-family: 'Inter', Arial, sans-serif;
  color: var(--h1-color);
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.5rem; text-align: center; }
h3 { font-size: 1.0rem; }
p { margin-bottom: 1rem; }
a {
  color:#cf7ce3;
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover { color: #a07ce3; } 
a:focus {
  outline: 3px solid #39A0ED;
  outline-offset: 2px;
}
ul, ol {
  margin-bottom: 1rem;
  padding-left: 2rem;
}

/* --- Utility Classes --- */
.text-center { text-align: center; }
.mt-1, .my-1 { margin-top: 0.5rem; }
.mt-2, .my-2 { margin-top: 1rem; }
.mt-3, .my-3 { margin-top: 1.5rem; }
.mt-4, .my-4 { margin-top: 2rem; }
.mb-1, .my-1 { margin-bottom: 0.5rem; }
.mb-2, .my-2 { margin-bottom: 1rem; }
.mb-3, .my-3 { margin-bottom: 1.5rem; }
.mb-4, .my-4 { margin-bottom: 2rem; }

/* --- Responsive font sizes --- */
@media (max-width: 768px) {
  html { font-size: 14px; }
}