/* Theme Variables - Dark/Light Mode Support */

/* Dark theme (default) */
html {
  /* Keep the default dark theme as defined in BaseLayout */
}

/* Light theme */
html.light-mode {
  /* Primary Colors */
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-tertiary: #e2e8f0;
  --bg-code: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-tertiary: #64748b;
  
  /* Accent Colors remain the same for brand consistency */
  
  /* Glow Effects - lighter for light mode */
  --glow-primary: rgba(6, 182, 212, 0.1);
  --glow-secondary: rgba(59, 130, 246, 0.1);
  --glow-tertiary: rgba(139, 92, 246, 0.1);
  
  /* Border Colors */
  --border-primary: rgba(0, 0, 0, 0.1);
  --border-secondary: rgba(0, 0, 0, 0.05);
  
  /* Card Background */
  --card-bg: rgba(255, 255, 255, 0.8);
  --card-border: rgba(56, 189, 248, 0.3); /* Slightly stronger border */
  
  /* UI Element Colors */
  --ui-element: #e2e8f0;
  --ui-element-hover: #cbd5e1;
}

/* Background adjustments for light mode */
html.light-mode body {
  background-image: 
    radial-gradient(circle at 20% 35%, rgba(6, 182, 212, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 15%, rgba(59, 130, 246, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(139, 92, 246, 0.05) 0%, transparent 40%);
}

/* Adding light mode grid overlay */
html.light-mode body::before {
  background-image: 
    linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
}

/* Theme transition for smooth switching */
html, body, * {
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Knowledge Graph light mode adjustments */
html.light-mode .graph-container {
  background: rgba(248, 250, 252, 0.6);
}

html.light-mode .graph-loading {
  background: rgba(241, 245, 249, 0.7);
}

html.light-mode .graph-filters {
  background: rgba(241, 245, 249, 0.7);
}

html.light-mode .graph-legend {
  background: rgba(241, 245, 249, 0.7);
}

html.light-mode .node-details {
  background: rgba(248, 250, 252, 0.9);
}