/* src/styles/theme.css */

/* Base Variables (Dark Mode Default) */
:root {
  --bg-primary: #0f1219;
  --bg-secondary: #161a24;
  --bg-tertiary: #1e2330;
  --bg-code: #1a1e2a;
  --text-primary: #e2e8f0;
  --text-secondary: #a0aec0;
  --text-tertiary: #718096;
  --accent-primary: #06b6d4; /* Cyan */
  --accent-secondary: #3b82f6; /* Blue */
  --accent-tertiary: #8b5cf6; /* Violet */
  --glow-primary: rgba(6, 182, 212, 0.2);
  --glow-secondary: rgba(59, 130, 246, 0.2);
  --glow-tertiary: rgba(139, 92, 246, 0.2);
  --border-primary: rgba(255, 255, 255, 0.1);
  --border-secondary: rgba(255, 255, 255, 0.05);
  --card-bg: rgba(24, 28, 44, 0.5);
  --card-border: rgba(56, 189, 248, 0.2); /* Cyan border */
  --ui-element: #1e293b;
  --ui-element-hover: #334155;
  --container-padding: clamp(1rem, 5vw, 3rem);
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-mono: 'JetBrains Mono', monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --bg-primary-rgb: 15, 18, 25; /* RGB for gradients */
  --bg-secondary-rgb: 22, 26, 36; /* RGB for gradients */
}

/* Enhanced Light Mode Variables - More tech-focused, less plain white */
:root.light-mode {
  /* Base Colors - Rich, sophisticated cool neutral palette with blue undertones */
  --bg-primary: #f0f4f8;  /* Slightly cooler, less stark than pure white */
  --bg-secondary: #e6edf5; /* Subtle blue-gray secondary that's visibly different */
  --bg-tertiary: #d8e2f0;  /* Deeper blue tint for tertiary with clear contrast */
  --bg-code: #eaeff5;      /* Distinctly colored code background for readability */

  /* Text Colors - High contrast for exceptional readability */
  --text-primary: #0b1b32; /* Near black with blue undertone - sharp contrast */
  --text-secondary: #2d3e50; /* Rich blue-gray for secondary text with good readability */
  --text-tertiary: #4a617a; /* Lighter blue-gray for tertiary text that's still readable */

  /* Accent Colors - Deep, vibrant colors that pop against light backgrounds */
  --accent-primary: #0277b6; /* Strong blue that stands out clearly */
  --accent-secondary: #1e56b1; /* Deep, rich blue */
  --accent-tertiary: #7132db; /* Vibrant violet with better contrast */

  /* Enhanced Glows - More vibrant and visible */
  --glow-primary: rgba(2, 119, 182, 0.25);
  --glow-secondary: rgba(30, 86, 177, 0.25);
  --glow-tertiary: rgba(113, 50, 219, 0.25);

  /* Refined Borders - More defined with higher contrast */
  --border-primary: rgba(30, 86, 177, 0.3); /* More visible blue-tinted borders */
  --border-secondary: rgba(2, 119, 182, 0.2);

  /* Card and UI Elements - More opaque for better definition */
  --card-bg: rgba(255, 255, 255, 0.85); /* Less transparent for better contrast */
  --card-border: rgba(30, 86, 177, 0.25); /* Stronger blue border */
  --ui-element: rgba(230, 237, 245, 0.9); /* Less transparent UI elements */
  --ui-element-hover: rgba(216, 226, 240, 0.95);

  /* RGB values for gradients and advanced effects */
  --bg-primary-rgb: 240, 244, 248; /* RGB for gradients */
  --bg-secondary-rgb: 230, 237, 245; /* RGB for gradients */

  /* Knowledge Graph specific enhancements - Critical improvements */
  --graph-bg: rgba(240, 244, 248, 0.85); /* More opaque background */
  --graph-border: rgba(30, 86, 177, 0.35); /* Stronger border */
  --graph-node: #ffffff; /* Pure white for maximum contrast */
  --graph-node-border: rgba(2, 119, 182, 0.8); /* Much more visible node borders */
  --graph-line: rgba(113, 50, 219, 0.5); /* Higher opacity for clear connections */
  --graph-highlight: rgba(2, 119, 182, 1); /* Full opacity for highlighted elements */
}

/* Ensure transitions for smooth theme changes */
*, *::before, *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Knowledge Graph specific theme enhancements - Glassmorphism with better definition */
:root.light-mode .graph-container {
  background: linear-gradient(135deg, rgba(240, 244, 248, 0.85), rgba(230, 237, 245, 0.9)); /* Gradient background instead of flat */
  backdrop-filter: blur(15px);
  border: 1px solid var(--graph-border);
  box-shadow: 0 10px 30px rgba(30, 86, 177, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  overflow: hidden;
}

/* Enhanced node styling for much better visibility */
:root.light-mode .node {
  background: var(--graph-node);
  border: 2px solid var(--graph-node-border);
  box-shadow: 0 4px 15px rgba(2, 119, 182, 0.25);
  transform: translateY(0);
}

:root.light-mode .node:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(2, 119, 182, 0.35);
  border-color: var(--accent-primary);
}

/* Connection lines with much better contrast */
:root.light-mode path.edge {
  stroke: var(--graph-line) !important;
  stroke-width: 1.5px !important;
}

:root.light-mode path.edge.highlighted {
  stroke: var(--graph-highlight) !important;
  stroke-width: 2.5px !important;
}

/* Node text labels with improved readability */
:root.light-mode .node-label {
  color: var(--text-primary) !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
  font-weight: 500 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(30, 86, 177, 0.15) !important;
}

:root.light-mode .node-details {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  box-shadow: 0 15px 35px rgba(2, 119, 182, 0.2);
  border: 1px solid rgba(30, 86, 177, 0.25);
  border-radius: 12px;
  padding: 1.5rem;
}

:root.light-mode .graph-filters {
  background: rgba(240, 244, 248, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(30, 86, 177, 0.25);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 5px 15px rgba(30, 86, 177, 0.1);
}

:root.light-mode .graph-filter {
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
  font-weight: 500;
}

:root.light-mode .graph-filter:hover {
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(30, 86, 177, 0.15);
}

:root.light-mode .graph-filter.active {
  background: linear-gradient(135deg, rgba(2, 119, 182, 0.15), rgba(30, 86, 177, 0.15));
  border-color: rgba(30, 86, 177, 0.5);
  box-shadow: 0 2px 10px rgba(30, 86, 177, 0.15);
  color: var(--accent-primary);
  font-weight: 600;
}

:root.light-mode .connections-list a {
  color: var(--accent-secondary);
  transition: color 0.2s ease, transform 0.2s ease;
  font-weight: 500;
}

:root.light-mode .connections-list a:hover {
  color: var(--accent-primary);
  transform: translateX(2px);
}

:root.light-mode .node-link {
  box-shadow: 0 4px 15px rgba(2, 119, 182, 0.2);
  background: linear-gradient(135deg, rgba(2, 119, 182, 0.1), rgba(30, 86, 177, 0.1));
  border: 1px solid rgba(30, 86, 177, 0.25);
  border-radius: 8px;
  transition: all 0.2s ease;
  color: var(--accent-primary);
  font-weight: 600;
}

:root.light-mode .node-link:hover {
  background: linear-gradient(135deg, rgba(2, 119, 182, 0.15), rgba(30, 86, 177, 0.15));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(2, 119, 182, 0.25);
}

/* Fix for code blocks in light mode */
:root.light-mode pre,
:root.light-mode code {
  background-color: var(--bg-code);
  color: var(--text-secondary);
  border: 1px solid rgba(30, 86, 177, 0.15);
  border-radius: 6px;
}

:root.light-mode code {
  color: var(--accent-secondary);
  padding: 0.2em 0.4em;
}

/* Services and Newsletter sections - More defined cards with depth */
:root.light-mode .service-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(30, 86, 177, 0.2);
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(30, 86, 177, 0.1);
  transform: translateY(0);
  transition: all 0.3s ease;
}

:root.light-mode .service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(30, 86, 177, 0.15);
  border-color: rgba(30, 86, 177, 0.3);
}

:root.light-mode .newsletter-container,
:root.light-mode .cta-container {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(30, 86, 177, 0.25);
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(30, 86, 177, 0.15);
}

:root.light-mode .newsletter-input {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(30, 86, 177, 0.3);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 10px rgba(30, 86, 177, 0.08);
  color: var(--text-primary);
}

:root.light-mode .newsletter-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 2px 15px rgba(2, 119, 182, 0.2);
  outline: none;
}

/* Buttons with sophisticated gradient effects */
:root.light-mode button {
  background: linear-gradient(135deg, rgba(240, 244, 248, 0.8), rgba(255, 255, 255, 1));
  border: 1px solid rgba(30, 86, 177, 0.25);
  border-radius: 8px;
  transition: all 0.2s ease;
  color: var(--text-secondary);
  font-weight: 500;
}

:root.light-mode button:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(240, 244, 248, 0.8));
  border-color: rgba(30, 86, 177, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 86, 177, 0.15);
  color: var(--accent-primary);
}

:root.light-mode .primary-button,
:root.light-mode .cta-primary-button {
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(30, 86, 177, 0.3);
  border-radius: 8px;
  font-weight: 600;
}

:root.light-mode .primary-button:hover,
:root.light-mode .cta-primary-button:hover {
  box-shadow: 0 6px 20px rgba(30, 86, 177, 0.4);
  transform: translateY(-2px);
  filter: brightness(1.05);
}

:root.light-mode .secondary-button,
:root.light-mode .cta-secondary-button {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(30, 86, 177, 0.3);
  color: var(--accent-secondary);
  border-radius: 8px;
}

:root.light-mode .secondary-button:hover,
:root.light-mode .cta-secondary-button:hover {
  background: rgba(255, 255, 255, 1);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(2, 119, 182, 0.2);
}

/* Hero section with enhanced gradient background */
:root.light-mode .hero-section {
  background: linear-gradient(160deg, var(--bg-secondary), var(--bg-primary));
  border-bottom: 1px solid rgba(30, 86, 177, 0.15);
}

:root.light-mode .hero-bg {
  background-image:
    radial-gradient(circle at 20% 35%, rgba(2, 119, 182, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 75% 15%, rgba(30, 86, 177, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(113, 50, 219, 0.08) 0%, transparent 40%);
}

/* Enhanced light mode body background with subtle animated grid pattern */
:root.light-mode body {
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(circle at 20% 35%, rgba(2, 119, 182, 0.07) 0%, transparent 50%),
    radial-gradient(circle at 75% 15%, rgba(30, 86, 177, 0.07) 0%, transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(113, 50, 219, 0.07) 0%, transparent 40%),
    linear-gradient(rgba(30, 86, 177, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 86, 177, 0.05) 1px, transparent 1px);
  background-size: auto, auto, auto, 20px 20px, 20px 20px;
  background-position: 0 0, 0 0, 0 0, center center, center center;
}

/* Blog specific enhancements */
:root.light-mode .blog-post-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(30, 86, 177, 0.2);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(30, 86, 177, 0.1);
  overflow: hidden;
  transform: translateY(0);
  transition: all 0.3s ease;
}

:root.light-mode .blog-post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(30, 86, 177, 0.15);
  border-color: rgba(30, 86, 177, 0.3);
}

:root.light-mode .blog-post-category {
  background: linear-gradient(135deg, rgba(2, 119, 182, 0.15), rgba(30, 86, 177, 0.15));
  color: var(--accent-primary);
  border-radius: 4px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

:root.light-mode .blog-post-title {
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.3;
  margin: 0.75rem 0;
  transition: color 0.2s ease;
}

:root.light-mode .blog-post-card:hover .blog-post-title {
  color: var(--accent-primary);
}

/* Blog post content styling */
:root.light-mode .blog-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(30, 86, 177, 0.2);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(30, 86, 177, 0.12);
  padding: 2.5rem;
}

/* Navigation and header for light mode */
:root.light-mode .site-header {
  background: rgba(240, 244, 248, 0.9);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(30, 86, 177, 0.15);
  box-shadow: 0 4px 20px rgba(30, 86, 177, 0.08);
}

:root.light-mode .nav-link {
  color: var(--text-secondary);
  font-weight: 500;
  transition: all 0.2s ease;
}

:root.light-mode .nav-link:hover {
  color: var(--accent-primary);
  transform: translateY(-1px);
}

:root.light-mode .nav-link.active {
  color: var(--accent-primary);
  font-weight: 600;
}

:root.light-mode .theme-toggle {
  background: rgba(230, 237, 245, 0.9);
  border: 1px solid rgba(30, 86, 177, 0.2);
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

:root.light-mode .theme-toggle:hover {
  background: rgba(230, 237, 245, 1);
  color: var(--accent-primary);
  transform: rotate(15deg);
  box-shadow: 0 2px 10px rgba(30, 86, 177, 0.15);
}

/* Footer styling */
:root.light-mode .site-footer {
  background: linear-gradient(160deg, var(--bg-secondary), var(--bg-primary));
  border-top: 1px solid rgba(30, 86, 177, 0.15);
  padding: 3rem 0;
}