/* Blue Theme Overrides */
/* Soft Blue Theme Overrides */
:root {
  --resume-border: #6288c5 !important; /* black border */
  --resume-heading: #0d6efd !important; /* heading blue */
}

/* Body background */
body {
  background-color: #fbfbfe !important; /* soft blue */
  color: #000 !important; /* default text color */
}

/* Cards / Panels */
.card,
.resume-preview,
.export-card,
.glass-panel {
  background-color: #ffffff !important; /* white panels */
  border: 2px solid #f4f0f0 !important; /* black borders */
  color: #0b0a0a !important;
}

/* Buttons */
button,
.btn,
.section-nav button {
  background-color: #0d6efd !important; /* blue button */
  color: #fff !important; /* white text */
  border: 2px solid #0d6efd !important; /* blue border */
  transition: background-color 0.3s ease, color 0.3s ease;
}

button:hover,
.btn:hover,
.section-nav button:hover,
.section-nav button.active {
  background-color: #a1bfde !important; /* lighter blue on hover */
  border-color: #0047b3 !important;
  color: #fff !important;
}
.qs-hero {
  background: linear-gradient(135deg, #cce7ff, #8fb1e5); /* light blue gradient */
  color: #003366; /* dark blue text for contrast */
}


.qs-panel {
  background-color: #78a4e6 !important; /* soft blue background */
  
  color: #0c62e4 !important; /* main text color blue */
  padding: 1.5rem !important;
}
/* Headings */
.resume-preview h1,
.resume-preview h2,
.resume-preview h3 {
  color: #0d6efd !important; /* blue headings */
}

/* Stat Chips */
.stat-chip {
  border: 2px solid #000000 !important; /* black border */
  background-color: rgba(13, 110, 253, 0.1) !important; /* soft blue */
  color: #0d6efd !important; /* blue text */
}

/* Template pills */
.template-pill {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  color: #0d6efd !important;
}

.template-pill.active {
  background: #0d6efd !important;
  color: #fff !important;
}

/* Dark mode adjustment */
body[data-mode="dark"] {
  background-color: #1a2a40 !important; /* soft dark blue */
  color: #ffffff !important;
}

body[data-mode="dark"] .card,
body[data-mode="dark"] .resume-preview,
body[data-mode="dark"] .glass-panel {
  background-color: #102341 !important;
  border: 2px solid #000000 !important;
  color: #ffffff !important;
}