:root {
  --primary-navy: #1E3A8A;
  --primary-navy-light: #3B82F6;
  --accent-gold: #D97706;
  --accent-gold-light: #F59E0B;
  --text-dark: #1F2937;
  --text-medium: #4B5563;
  --bg-light: #F8FAFC;
  --bg-white: #FFFFFF;
  --border-light: #E5E7EB;

  --body-gradient-from: #F8FAFC;
  --body-gradient-to: #E2E8F0;
  --tab-hover-bg: #F1F5F9;
  --experience-card-gradient-from: #F8FAFC;
  --experience-card-gradient-to: #F1F5F9;
  --education-card-gradient-from: #FEF3C7;
  --education-card-gradient-to: #FDE68A;
  --education-card-border: #F59E0B;
  --certification-card-gradient-from: #DBEAFE;
  --certification-card-gradient-to: #BFDBFE;
  --skills-section-gradient-from: #F0F9FF;
  --skills-section-gradient-to: #E0F2FE;
  --technical-grid-gradient-from: #F8FAFC;
  --technical-grid-gradient-to: #F1F5F9;
  --tab-active-shadow: rgba(30, 58, 138, 0.1);
  --download-btn-shadow-hover: rgba(217, 119, 6, 0.3);
}

/* Page background and container */
body {
  background: linear-gradient(135deg, var(--body-gradient-from) 0%, var(--body-gradient-to) 100%);
  color: var(--text-dark);
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

.main-container {
  background: var(--bg-white);
  box-shadow: 0 20px 25px -5px var(--tab-active-shadow), 0 10px 10px -5px var(--tab-active-shadow);
}

/* Header */
.header-gradient {
  background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-navy-light) 100%);
  color: #fff;
  font-family: Inter, Helvetica, Arial, sans-serif;
}
.header-gradient h1,
.header-gradient h2,
.header-gradient h3 {
  color: #fff !important;
  text-shadow: 0 2px 8px var(--tab-active-shadow);
}

/* Header subtle text and links */
.header-gradient p,
.header-gradient .text-blue-100 {
  color: #DBEAFE !important;
}
.header-gradient a {
  color: #FEF08A;
  transition: color 0.2s;
}
.header-gradient a:hover {
  color: #FEF9C3;
}

/* Download button */
.download-btn {
  background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-light) 100%);
  color: #fff;
  font-weight: bold;
  font-family: Inter, Helvetica, Arial, sans-serif;
  transition: all 0.3s;
  border: none;
}
.download-btn:hover {
  box-shadow: 0 10px 25px -5px var(--download-btn-shadow-hover);
}

/* Tabs */
.tab-button {
  background: var(--bg-white);
  color: var(--text-medium);
  border: 1px solid var(--border-light);
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-weight: 600;
  transition: all 0.2s;
}
.tab-button.active {
  background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-navy-light) 100%);
  color: #fff !important;
  border-color: var(--primary-navy);
  box-shadow: 0 4px 6px -1px var(--tab-active-shadow);
}
.tab-button:hover:not(.active) {
  background: var(--tab-hover-bg);
  color: var(--primary-navy);
  border-color: var(--primary-navy-light);
}
.tab-button:focus {
  outline: 2px solid var(--primary-navy);
  outline-offset: 2px;
}

/* Section headers */
.tab-content h2 {
  color: #111827;
  border-bottom: 2px solid var(--primary-navy-light);
}

/* Cards */
.experience-card {
  border-left: 4px solid var(--primary-navy);
  background: linear-gradient(135deg, var(--experience-card-gradient-from) 0%, var(--experience-card-gradient-to) 100%);
  color: var(--text-dark);
}
.education-card {
  background: linear-gradient(135deg, var(--education-card-gradient-from) 0%, var(--education-card-gradient-to) 100%);
  border: 1px solid var(--education-card-border);
  color: var(--text-dark);
}
.certification-card {
  background: linear-gradient(135deg, var(--certification-card-gradient-from) 0%, var(--certification-card-gradient-to) 100%);
  border: 1px solid var(--primary-navy-light);
  color: var(--text-dark);
}
.skills-section {
  background: linear-gradient(135deg, var(--skills-section-gradient-from) 0%, var(--skills-section-gradient-to) 100%);
  color: var(--text-dark);
}
.technical-grid {
  background: linear-gradient(135deg, var(--technical-grid-gradient-from) 0%, var(--technical-grid-gradient-to) 100%);
  color: var(--text-dark);
}
.bg-white {
  background: var(--bg-white) !important;
}

/* Lists and badges */
.text-blue-600 {
  color: var(--primary-navy) !important;
}
.text-green-600 {
  color: #059669 !important;
}
.text-purple-600 {
  color: #7C3AED !important;
}
.text-yellow-600 {
  color: var(--accent-gold) !important;
}
.bg-blue-500 {
  background-color: #3B82F6 !important;
}
.bg-green-500 {
  background-color: #22C55E !important;
}
.bg-purple-500 {
  background-color: #A855F7 !important;
}

/* Utility text classes for contrast */
.text-gray-900,
.text-gray-800,
.text-gray-700 {
  color: #111827 !important;
}
.text-gray-600 {
  color: #374151 !important;
}
.text-gray-500 {
  color: #6B7280 !important;
}

/* Links */
a {
  color: var(--primary-navy-light);
  text-decoration: underline;
  transition: color 0.2s;
}
a:hover {
  color: var(--primary-navy);
}
a:visited {
  color: #4B5563;
}

/* Footer */
footer {
  color: #6B7280;
  border-top: 1px solid var(--border-light);
  background: var(--bg-section);
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

/* Tab content visibility */
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

/* DAY MODE: Ensure title and active tab text are always readable */
body:not(.dark-mode) .header-gradient h1,
body:not(.dark-mode) .header-gradient h2,
body:not(.dark-mode) .header-gradient h3 {
  color: #fff !important;
  text-shadow: 0 2px 8px var(--tab-active-shadow);
}
body:not(.dark-mode) .tab-button.active {
  color: #fff !important;
  font-weight: bold;
  text-shadow: 0 2px 8px var(--tab-active-shadow);
}

/* --- NIGHT MODE styles (keep these as you have them now) --- */
body.dark-mode {
  background: linear-gradient(135deg, #18181b 0%, #27272a 100%);
  color: #e5e7eb;
}
body.dark-mode .main-container {
  background: #232326;
  box-shadow: 0 20px 25px -5px rgba(24, 24, 27, 0.5), 0 10px 10px -5px rgba(24, 24, 27, 0.2);
}
body.dark-mode .header-gradient {
  background: linear-gradient(135deg, #232326 0%, #18181b 100%);
  color: #e5e7eb;
}
body.dark-mode .tab-button {
  background-color: #232326;
  color: #e5e7eb;
  border-color: #3f3f46;
}
body.dark-mode .tab-button.active {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  color: #fffbe6;
  border-color: #6366f1;
}
body.dark-mode .tab-button:hover:not(.active) {
  background-color: #3f3f46;
  color: #fffbe6;
  border-color: #6366f1;
}
body.dark-mode .experience-card,
body.dark-mode .education-card,
body.dark-mode .certification-card,
body.dark-mode .skills-section,
body.dark-mode .technical-grid {
  background: #232326;
  color: #e5e7eb;
  border-color: #3f3f46;
}
body.dark-mode .download-btn {
  background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
  color: #fffbe6;
}
body.dark-mode a,
body.dark-mode .text-blue-600,
body.dark-mode .text-green-600,
body.dark-mode .text-purple-600,
body.dark-mode .text-yellow-600 {
  color: #60a5fa !important;
}
body.dark-mode .text-gray-900,
body.dark-mode .text-gray-700,
body.dark-mode .text-gray-600,
body.dark-mode .text-gray-500 {
  color: #e5e7eb !important;
}
body.dark-mode footer {
  color: #a1a1aa;
  border-color: #3f3f46;
}

body.dark-mode .bg-gradient-to-r,
body.dark-mode .skills-section,
body.dark-mode .technical-grid {
  background: linear-gradient(135deg, #232326 0%, #2d2d31 100%) !important;
  color: #f3f4f6 !important;
}

body.dark-mode #summary .bg-gradient-to-r {
  background: linear-gradient(135deg, #232326 0%, #2d2d31 100%) !important;
  color: #f3f4f6 !important;
}

/* Make technical skill section comfortable and readable in night mode */
body.dark-mode #technical .technical-grid,
body.dark-mode #technical .skills-section {
  background: #232a36 !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}

/* Override inner card backgrounds and text */
body.dark-mode #technical .bg-white {
  background: #232a36 !important;
  box-shadow: none !important;
}

body.dark-mode #technical .technical-grid h3,
body.dark-mode #technical .skills-section h3 {
  color: #e2e8f0 !important;
}

body.dark-mode #technical .technical-grid li,
body.dark-mode #technical .skills-section li,
body.dark-mode #technical .technical-grid span,
body.dark-mode #technical .skills-section span {
  color: #cbd5e1 !important;
}

body.dark-mode #technical .technical-grid .bg-blue-500,
body.dark-mode #technical .technical-grid .bg-green-500,
body.dark-mode #technical .technical-grid .bg-purple-500 {
  background-color: #334155 !important;
}

/* Hide all tab contents by default */
.tab-content {
  display: none;
}

/* Show only the active tab */
.tab-content.active {
  display: block;
}

/* DAY MODE: Ensure title and active tab text are readable */
.header-gradient h1,
.header-gradient h2,
.header-gradient h3 {
  color: #fff !important;
}

.tab-button.active {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(10,23,78,0.25);
}

/* NIGHT MODE: Ensure title and active tab text are readable */
body.dark-mode .header-gradient h1,
body.dark-mode .header-gradient h2,
body.dark-mode .header-gradient h3 {
  color: #e5e7eb !important;
}

body.dark-mode .tab-button.active {
  color: #fffbe6 !important;
}

/* Ensure day mode title is always white, even with Tailwind classes */
body:not(.dark-mode) .header-gradient h1,
body:not(.dark-mode) .header-gradient h2,
body:not(.dark-mode) .header-gradient h3 {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(10,23,78,0.35); /* subtle shadow for contrast */
}

body:not(.dark-mode) .tab-button.active {
  color: #fff !important;
  font-weight: bold;
  text-shadow: 0 2px 8px rgba(10,23,78,0.25); /* subtle shadow for contrast */
}