/* FILE: assets/css/theme.css */
/* =============================================================================
   THEME SYSTEM - DARK MODE
   Light/dark mode with proper contrast and accessibility (WCAG AA)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   DARK MODE VARIABLES (WCAG AA Compliant)
   ----------------------------------------------------------------------------- */
body.dark-mode,
[data-theme="dark"] {
  /* Core Colors - Dark Theme Overrides */
  --background-light: #0f172a; /* Slate 900 */
  --white: #1e293b; /* Slate 800 - card backgrounds */
  --gray-100: #1e293b; /* Surface */
  --gray-200: #334155; /* Borders */
  --gray-300: #64748b; /* Muted text - 4.5:1 on dark bg ✓ */
  --gray-600: #94a3b8; /* Secondary text - 5.6:1 on dark bg ✓ */
  --gray-700: #e2e8f0; /* Primary text - 12.6:1 on dark bg ✓ */
  --text-dark: #f8fafc; /* Headings - 15.8:1 on dark bg ✓ */

  /* Theme Colors - Adjusted for Dark Mode Contrast */
  /* Purple on dark bg: #c4b5fd = 8.8:1 contrast ✓ */
  --primary-color: #c4b5fd;
  /* Light purple hover: #ddd6fe = 11.2:1 contrast ✓ */
  --primary-light: #ddd6fe;
  --secondary-color: #e9d5ff;
  /* Gold on dark: #fcd34d = 11.3:1 contrast ✓ */
  --highlight-color: #fcd34d;

  /* Functional colors for dark mode */
  --error-color: #fca5a5; /* Light red - 8.1:1 ✓ */
  --success-color: #6ee7b7; /* Light green - 10.3:1 ✓ */
  --warning-color: #fcd34d; /* Amber - 11.3:1 ✓ */
  --accent-teal: #5eead4; /* Light teal - 10.5:1 ✓ */
  --accent-rose: #fda4af; /* Light rose - 8.5:1 ✓ */

  /* Focus ring for dark mode */
  --focus-ring: #c4b5fd;

  /* Chart & Component Specifics */
  --card-bg: #1e293b;
  --border-color: rgba(255, 255, 255, 0.15);
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;

  /* Pattern backgrounds for dark mode */
  --pattern-dots: radial-gradient(
    circle,
    rgba(196, 181, 253, 0.12) 1px,
    transparent 1px
  );
  --pattern-grid: linear-gradient(
      rgba(196, 181, 253, 0.06) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(196, 181, 253, 0.06) 1px, transparent 1px);
}

/* -----------------------------------------------------------------------------
   GLOBAL DARK MODE ADJUSTMENTS
   ----------------------------------------------------------------------------- */
body.dark-mode {
  background-color: var(--background-light);
  color: var(--text-dark);
}

/* Links in dark mode */
body.dark-mode a {
  color: var(--primary-color);
  text-decoration-color: rgba(196, 181, 253, 0.5);
}

body.dark-mode a:hover {
  color: var(--primary-light);
  text-decoration-color: var(--primary-light);
}

body.dark-mode a:focus-visible {
  outline-color: var(--focus-ring);
}

/* -----------------------------------------------------------------------------
   NAVBAR DARK MODE
   ----------------------------------------------------------------------------- */
body.dark-mode .navbar {
  background-color: rgba(15, 23, 42, 0.95);
  border-bottom-color: var(--gray-200);
}

body.dark-mode .navbar-brand {
  color: var(--text-dark);
}

body.dark-mode .navbar-menu a {
  color: var(--gray-600);
}

body.dark-mode .navbar-menu a:hover,
body.dark-mode .navbar-menu a.active {
  color: var(--primary-color);
  background-color: rgba(196, 181, 253, 0.1);
}

/* -----------------------------------------------------------------------------
   BUTTONS DARK MODE
   ----------------------------------------------------------------------------- */
body.dark-mode .btn-secondary {
  background-color: transparent;
  color: var(--primary-color);
  border-color: var(--primary-color);
}

body.dark-mode .btn-secondary:hover {
  background-color: var(--primary-color);
  color: var(--background-light);
}

body.dark-mode .btn-secondary:focus-visible {
  outline-color: var(--focus-ring);
}

body.dark-mode .btn-primary {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-light)
  );
  color: #0f172a; /* Dark text on light button for contrast */
}

body.dark-mode .btn-primary:focus-visible {
  outline-color: var(--focus-ring);
}

/* -----------------------------------------------------------------------------
   CARDS & SECTIONS DARK MODE
   ----------------------------------------------------------------------------- */
body.dark-mode .card,
body.dark-mode .project-card,
body.dark-mode .experience-highlight,
body.dark-mode .timeline-content,
body.dark-mode .leadership-card,
body.dark-mode .skill-category-card,
body.dark-mode .contact-card,
body.dark-mode .status-card,
body.dark-mode .method-card,
body.dark-mode .stat-card {
  background-color: var(--white);
  color: var(--text-dark);
  border: 1px solid var(--gray-200); /* Subtle border for definition */
}

body.dark-mode .section-alt {
  background-color: #162032; /* Slightly lighter than main bg */
  background-image: var(--pattern-grid);
}

/* -----------------------------------------------------------------------------
   PROJECTS PAGE DARK MODE - CRITICAL FIXES
   ----------------------------------------------------------------------------- */

/* Featured Project Section */
body.dark-mode .featured-project {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* Executive Summary & Content Warnings */
body.dark-mode .executive-summary {
  background: linear-gradient(
    135deg,
    rgba(167, 139, 250, 0.15),
    rgba(216, 180, 254, 0.1)
  );
  border-left-color: var(--primary-color);
}

body.dark-mode .content-warning {
  background: linear-gradient(
    135deg,
    rgba(220, 38, 38, 0.2),
    rgba(239, 68, 68, 0.1)
  );
  border-left-color: #ef4444;
}

body.dark-mode .content-warning-title {
  color: #fca5a5;
}

/* Stats Cards */
body.dark-mode .stat-card {
  background-color: var(--white);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

body.dark-mode .stat-number {
  color: var(--primary-color);
}

body.dark-mode .stat-label {
  color: var(--gray-700);
}

/* Highlighted stat card stays with error color */
body.dark-mode .stat-card.highlight-stat {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  border: none;
}

body.dark-mode .stat-card.highlight-stat .stat-number,
body.dark-mode .stat-card.highlight-stat .stat-label {
  color: #ffffff;
}

/* Data Breakdown Bars */
body.dark-mode .breakdown-bar {
  background-color: var(--gray-200);
}

body.dark-mode .breakdown-label {
  color: var(--text-dark);
}

body.dark-mode .breakdown-item.highlight-breakdown .breakdown-label {
  color: #fda4af; /* Light rose */
}

/* Finding Cards */
body.dark-mode .findings-section {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1px solid var(--gray-200);
}

body.dark-mode .finding-card {
  background-color: var(--white);
  border-left-color: var(--gray-300);
}

body.dark-mode .finding-card.critical {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), var(--white));
  border-left-color: #ef4444;
}

body.dark-mode .finding-card.warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), var(--white));
  border-left-color: var(--warning-color);
}

body.dark-mode .finding-card.info {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.1), var(--white));
  border-left-color: var(--accent-teal);
}

body.dark-mode .finding-header h4 {
  color: var(--text-dark);
}

body.dark-mode .finding-content p {
  color: var(--gray-700);
}

body.dark-mode .finding-metrics {
  background-color: var(--gray-200);
}

body.dark-mode .metric-label {
  color: var(--gray-700);
}

body.dark-mode .metric-value {
  color: var(--primary-color);
}

body.dark-mode .metric-value.critical {
  color: #fca5a5;
}

body.dark-mode .metric-value.warning {
  color: #fcd34d;
}

/* Methodology Cards */
body.dark-mode .method-card {
  background-color: var(--white);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

body.dark-mode .method-card h4 {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

body.dark-mode .method-card li {
  color: var(--gray-700);
}

body.dark-mode .method-card li::before {
  color: var(--primary-color);
}

body.dark-mode .method-card strong {
  color: var(--primary-color);
}

/* Mitigation Comparison */
body.dark-mode .mitigation-comparison {
  background-color: var(--white);
}

body.dark-mode .comparison-label {
  color: var(--text-dark);
}

body.dark-mode .comparison-bar {
  background-color: var(--gray-200);
}

body.dark-mode .comparison-item.highlight-comparison .comparison-label {
  color: #34d399; /* Light green */
}

body.dark-mode .mitigation-note {
  background: linear-gradient(
    135deg,
    rgba(167, 139, 250, 0.15),
    rgba(216, 180, 254, 0.1)
  );
  border-left-color: var(--primary-color);
  color: var(--gray-700);
}

body.dark-mode .mitigation-note strong {
  color: var(--primary-color);
}

/* Tech Stack */
body.dark-mode .tech-stack-section {
  background-color: var(--gray-200);
}

body.dark-mode .tech-stack-section h4 {
  color: var(--text-dark);
}

body.dark-mode .tech-tag {
  background-color: var(--white);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

body.dark-mode .tech-tag:hover {
  background-color: var(--primary-color);
  color: #0f172a;
}

/* Visual Container */
body.dark-mode .visual-container {
  background-color: var(--white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* SVG Text Colors for Dark Mode */
body.dark-mode .viz-title,
body.dark-mode .viz-label,
body.dark-mode .viz-highlight {
  fill: var(--text-dark);
}

body.dark-mode .viz-subtitle,
body.dark-mode .viz-highlight-small,
body.dark-mode .viz-footer {
  fill: var(--gray-600);
}

/* Insight Box */
body.dark-mode .insight-box {
  background: linear-gradient(
    135deg,
    rgba(255, 192, 67, 0.15),
    rgba(255, 192, 67, 0.05)
  );
  border-left-color: var(--highlight-color);
}

body.dark-mode .insight-box h5 {
  color: var(--text-dark);
}

body.dark-mode .insight-box p {
  color: var(--gray-700);
}

/* Research Section Borders */
body.dark-mode .research-section {
  border-top-color: var(--gray-200);
}

body.dark-mode .research-section h3 {
  color: var(--primary-color);
}

/* -----------------------------------------------------------------------------
   FILTER BUTTONS DARK MODE
   ----------------------------------------------------------------------------- */
body.dark-mode .filter-section {
  background-color: var(--white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .filter-btn {
  background-color: var(--gray-200);
  color: var(--gray-700);
  border-color: transparent;
}

body.dark-mode .filter-btn:hover {
  background-color: var(--primary-color);
  color: #0f172a;
}

body.dark-mode .filter-btn.active {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-light)
  );
  color: #0f172a;
  border-color: var(--primary-color);
}

/* -----------------------------------------------------------------------------
   PROJECT CARDS DARK MODE
   ----------------------------------------------------------------------------- */
body.dark-mode .project-card-title {
  color: var(--text-dark);
}

body.dark-mode .project-card-tagline {
  color: var(--gray-600);
}

body.dark-mode .project-card-body p {
  color: var(--gray-700);
}

body.dark-mode .project-card-body h4 {
  color: var(--primary-color);
}

body.dark-mode .project-card-body strong {
  color: var(--primary-color);
}

body.dark-mode .project-card-footer {
  border-top-color: var(--gray-200);
}

body.dark-mode .project-link {
  color: var(--primary-color);
}

body.dark-mode .project-link:hover {
  color: var(--primary-light);
}

body.dark-mode .project-status {
  color: var(--gray-600);
}

body.dark-mode .tech-stack {
  background-color: var(--gray-200);
}

/* -----------------------------------------------------------------------------
   ABOUT PAGE DARK MODE
   ----------------------------------------------------------------------------- */
body.dark-mode .timeline-item::before {
  border-color: var(--white);
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2);
}

body.dark-mode .pullquote {
  background-color: rgba(167, 139, 250, 0.1);
  border-left-color: var(--primary-color);
}

body.dark-mode .pullquote p {
  color: var(--primary-color);
}

/* -----------------------------------------------------------------------------
   SKILLS PAGE DARK MODE
   ----------------------------------------------------------------------------- */
body.dark-mode .skill-item {
  background-color: var(--white);
}

body.dark-mode .skill-bar {
  background-color: var(--gray-200);
}

/* -----------------------------------------------------------------------------
   AWARDS PAGE DARK MODE
   ----------------------------------------------------------------------------- */
body.dark-mode .award-content {
  background-color: var(--white);
}

body.dark-mode .award-impact {
  background-color: rgba(167, 139, 250, 0.1);
  border-left-color: var(--primary-color);
}

body.dark-mode .impact-quote {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-light)
  );
  color: #0f172a;
}

/* -----------------------------------------------------------------------------
   EXPERIENCE PAGE DARK MODE
   ----------------------------------------------------------------------------- */
body.dark-mode .experience-highlight {
  background-color: var(--white);
  border-left-color: var(--primary-color);
}

body.dark-mode .company-name {
  color: var(--primary-color);
}

body.dark-mode .role-meta {
  color: var(--gray-600);
}

body.dark-mode .responsibility-list li {
  color: var(--gray-700);
}

body.dark-mode .responsibility-list li::before {
  color: var(--primary-color);
}

body.dark-mode .tech-used {
  background-color: var(--gray-200);
}

body.dark-mode .impact-metric {
  background: linear-gradient(
    135deg,
    rgba(5, 150, 105, 0.2),
    rgba(16, 185, 129, 0.1)
  );
  border-left-color: #10b981;
}

body.dark-mode .achievement-highlight {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.2),
    rgba(217, 119, 6, 0.1)
  );
  border-left-color: var(--warning-color);
}

body.dark-mode .insight-box {
  background: linear-gradient(
    135deg,
    rgba(167, 139, 250, 0.15),
    rgba(216, 180, 254, 0.1)
  );
  border-left-color: var(--primary-color);
}

/* -----------------------------------------------------------------------------
   CONTACT PAGE DARK MODE
   ----------------------------------------------------------------------------- */
body.dark-mode .contact-icon {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-light)
  );
  color: #0f172a;
}

body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea {
  background-color: var(--gray-200);
  border-color: var(--gray-300);
  color: var(--text-dark);
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group select:focus,
body.dark-mode .form-group textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
}

body.dark-mode .form-group input::placeholder,
body.dark-mode .form-group textarea::placeholder {
  color: var(--gray-600);
}

body.dark-mode .preferences-note {
  background-color: rgba(167, 139, 250, 0.1);
  border-left-color: var(--primary-color);
}

body.dark-mode .preferences-note strong {
  color: var(--primary-color);
}

/* -----------------------------------------------------------------------------
   FOOTER DARK MODE
   ----------------------------------------------------------------------------- */
body.dark-mode .site-footer {
  background-color: #020617; /* Even darker for footer */
  border-top-color: var(--gray-200);
}

body.dark-mode .footer-tagline,
body.dark-mode .footer-bottom p {
  color: var(--gray-600);
}

body.dark-mode .footer-nav a {
  color: var(--gray-600);
}

body.dark-mode .footer-nav a:hover {
  color: var(--primary-color);
}

/* -----------------------------------------------------------------------------
   THEME TOGGLE BUTTON
   ----------------------------------------------------------------------------- */
.theme-toggle {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 60px;
  height: 60px;
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-light)
  );
  color: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  z-index: 1000;
}

.theme-toggle:hover {
  transform: translateY(-4px) rotate(15deg);
  box-shadow: var(--shadow-xl);
}

.theme-toggle svg {
  width: 28px;
  height: 28px;
}

/* Hide/show icons based on theme */
.theme-toggle .sun-icon {
  display: none;
}
.theme-toggle .moon-icon {
  display: block;
}

body.dark-mode .theme-toggle .sun-icon {
  display: block;
}
body.dark-mode .theme-toggle .moon-icon {
  display: none;
}

body.dark-mode .theme-toggle {
  background: linear-gradient(135deg, var(--highlight-color), #fbbf24);
  color: #0f172a;
}

/* -----------------------------------------------------------------------------
   ACCESSIBILITY
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.dark-mode * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  body.dark-mode {
    --primary-color: #c4a3ff;
    --secondary-color: #e5d5ff;
    --text-dark: #ffffff;
  }
}