/* =================================================================
   LIGHT-THEME.CSS - Light Mode Color Scheme
   
   This file contains all the light theme specific styling:
   - CSS Custom Properties (variables) for light mode
   - Light mode color applications
   - GitHub markdown light theme integration
   - Light mode specific overrides
   ================================================================= */

/* ===== GROK LIGHT THEME VARIABLES ===== */
:root[data-theme="light"] {
  /* Base colors - Grok's clean aesthetic */
  --bg-color: #ffffff;
  --text-color: #000000;
  --border-color: #e0e0e0;
  --accent-color: #4fc3f7; /* Light blue accent */
  --accent-color-rgb: 79, 195, 247;

  /* Header colors */
  --header-bg: #ffffff;
  --header-gradient: #f8f9fa;
  
  /* Button colors - Grok's minimal style */
  --button-bg: #f8f9fa;
  --button-bg-rgb: 248, 249, 250; /* RGB values for frosted glass */
  --button-hover: rgba(79, 195, 247, 0.1); /* Light blue with transparency */
  --button-active: #e9ecef;
  
  /* Stats background */
  --stats-bg: rgba(255, 255, 255, 0.9);
  
  /* Editor and preview colors - Different for visual separation */
  --editor-bg: #f8f9fa; /* Light gray for editor */
  --editor-bg-rgb: 248, 249, 250; /* RGB values for frosted glass */
  --preview-bg: #ffffff; /* Pure white for preview */
  --preview-bg-rgb: 255, 255, 255; /* RGB values for frosted glass */
  --preview-text-color: #000000;
  
  /* Table colors */
  --table-bg: #ffffff;
  --table-row-alt: #f8f9fa;
  --table-border: #e0e0e0;
  
  /* Scrollbar colors */
  --scrollbar-track-light: rgba(0, 0, 0, 0.1);
  --scrollbar-thumb-light: rgba(0, 0, 0, 0.3);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.5);
  
  /* Dropzone colors */
  --dropzone-bg: #f8f9fa;
  --dropzone-border: rgba(0, 0, 0, 0.3);
  --dropzone-bg-subtle: rgba(0, 0, 0, 0.02);
  --dropzone-active-border: rgba(0, 0, 0, 0.6);
  --dropzone-active-bg: rgba(0, 0, 0, 0.05);
  --dropzone-hover-border: rgba(0, 0, 0, 0.5);
  --dropzone-hover-bg: rgba(0, 0, 0, 0.03);
  
  /* Code highlighting */
  --code-bg: #f8f9fa;
  --code-pre-bg: #f6f8fa;
  --code-inline-bg: #FFF8EC;
  --code-inline-color: #8B4500;
  
  /* Loading screen colors */
  --loading-bg-start: #667eea;
  --loading-bg-end: #764ba2;
  --loading-content-color: #ffffff;
  --loading-text-shadow: rgba(0, 0, 0, 0.3);
  --loading-title-bg-start: #ffffff;
  --loading-title-bg-end: #f0f8ff;
  --loading-title-shadow: rgba(0, 0, 0, 0.2);
  --loading-subtitle-color: rgba(255, 255, 255, 0.9);
  --loading-subtitle-shadow: rgba(0, 0, 0, 0.2);
  --loading-progress-bg: rgba(255, 255, 255, 0.2);
  --loading-progress-border: rgba(255, 255, 255, 0.3);
  --loading-progress-bar-start: #ffffff;
  --loading-progress-bar-end: #f0f8ff;
  --loading-progress-shadow: rgba(255, 255, 255, 0.5);
  --loading-designer-color: rgba(255, 255, 255, 0.8);
  --loading-designer-shadow: rgba(0, 0, 0, 0.2);
  
  /* Hover effects */
  --hover-accent: rgba(79, 195, 247, 0.1);
  --hover-primary: rgba(79, 195, 247, 0.15);
  --hover-shadow: rgba(79, 195, 247, 0.2);
  --hover-shadow-primary: rgba(79, 195, 247, 0.3);
  
  /* UI element colors */
  --view-border: rgba(0, 0, 0, 0.2);
  --button-border: rgba(0, 0, 0, 0.2);
  --separator-color: rgba(0, 0, 0, 0.3);
  --blockquote-color: #666666;
  --hr-color: #e0e0e0;
  --logo-bg: rgba(0, 0, 0, 0.1);
  --logo-border: rgba(0, 0, 0, 0.3);
  --logo-text: #333333;
  --logo-hover-bg: rgba(0, 0, 0, 0.15);
  --logo-hover-border: rgba(0, 0, 0, 0.5);
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.2);
  --shadow-strong: rgba(0, 0, 0, 0.3);
  
  /* Danger colors */
  --color-danger-fg: #dc3545;
}

/* ===== GITHUB MARKDOWN LIGHT THEME ===== */
/* GitHub's official light mode syntax highlighting variables */
.markdown-body {
  color-scheme: light;
  --color-prettylights-syntax-comment: #6a737d;
  --color-prettylights-syntax-constant: #005cc5;
  --color-prettylights-syntax-entity: #6f42c1;
  --color-prettylights-syntax-storage-modifier-import: #24292e;
  --color-prettylights-syntax-entity-tag: #22863a;
  --color-prettylights-syntax-keyword: #d73a49;
  --color-prettylights-syntax-string: #032f62;
  --color-prettylights-syntax-variable: #e36209;
  --color-prettylights-syntax-brackethighlighter-unmatched: #b31d28;
  --color-prettylights-syntax-invalid-illegal-text: #fafbfc;
  --color-prettylights-syntax-invalid-illegal-bg: #b31d28;
  --color-prettylights-syntax-carriage-return-text: #fafbfc;
  --color-prettylights-syntax-carriage-return-bg: #d73a49;
  --color-prettylights-syntax-string-regexp: #22863a;
  --color-prettylights-syntax-markup-list: #735c0f;
  --color-prettylights-syntax-markup-heading: #005cc5;
  --color-prettylights-syntax-markup-italic: #24292e;
  --color-prettylights-syntax-markup-bold: #24292e;
  --color-prettylights-syntax-markup-deleted-text: #b31d28;
  --color-prettylights-syntax-markup-deleted-bg: #ffeef0;
  --color-prettylights-syntax-markup-inserted-text: #22863a;
  --color-prettylights-syntax-markup-inserted-bg: #f0fff4;
  --color-prettylights-syntax-markup-changed-text: #e36209;
  --color-prettylights-syntax-markup-changed-bg: #ffebda;
  --color-prettylights-syntax-markup-ignored-text: #f6f8fa;
  --color-prettylights-syntax-markup-ignored-bg: #005cc5;
  --color-prettylights-syntax-meta-diff-range: #6f42c1;
  --color-prettylights-syntax-brackethighlighter-angle: #586069;
  --color-prettylights-syntax-sublimelinter-gutter-mark: #e1e4e8;
  --color-prettylights-syntax-constant-other-reference-link: #032f62;
  --color-fg-default: #24292e;
  --color-fg-muted: #586069;
  --color-fg-subtle: #6a737d;
  --color-canvas-default: #ffffff;
  --color-canvas-subtle: #f6f8fa;
  --color-border-default: #e1e4e8;
  --color-border-muted: #eaecef;
  --color-neutral-muted: rgba(175,184,193,0.2);
  --color-accent-fg: #0366d6;
  --color-accent-emphasis: #0366d6;
  --color-attention-subtle: #fff5b1;
  --color-danger-fg: #d73a49;
}

/* ===== GROK LIGHT THEME FROSTED GLASS EFFECTS ===== */

/* ===== LIGHT THEME LOADING SCREEN ===== */
[data-theme="light"] .loading-screen {
  background: linear-gradient(135deg, var(--loading-bg-start) 0%, var(--loading-bg-end) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

[data-theme="light"] .loading-content {
  color: var(--loading-content-color);
  text-shadow: 0 2px 10px var(--loading-text-shadow);
}

[data-theme="light"] .loading-title {
  background: linear-gradient(45deg, var(--loading-title-bg-start), var(--loading-title-bg-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px var(--loading-title-shadow));
}

[data-theme="light"] .loading-subtitle {
  color: var(--loading-subtitle-color);
  text-shadow: 0 1px 3px var(--loading-subtitle-shadow);
}

[data-theme="light"] .loading-progress {
  background: var(--loading-progress-bg);
  border: 1px solid var(--loading-progress-border);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

[data-theme="light"] .progress-bar {
  background: linear-gradient(90deg, var(--loading-progress-bar-start), var(--loading-progress-bar-end), var(--loading-progress-bar-start));
  box-shadow: 0 0 10px var(--loading-progress-shadow);
}

[data-theme="light"] .loading-designer {
  color: var(--loading-designer-color);
  text-shadow: 0 1px 2px var(--loading-designer-shadow);
}

/* Light theme loading pulse animation */
[data-theme="light"] .loading-screen {
  animation: loadingPulseLight 4s ease-in-out infinite;
}
/* Grok's signature frosted glass hover effect for light theme */
button,
.btn,
.nav-item,
.dropdown-item {
  transition: all 0.2s ease;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}

button:hover,
.btn:hover,
.nav-item:hover,
.dropdown-item:hover {
  background-color: var(--hover-accent) !important; /* Light blue with transparency */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 4px;
  box-shadow: 0 0 10px var(--hover-shadow);
}

/* Enhanced frosted glass for primary buttons */
.btn-primary:hover {
  background-color: var(--hover-primary) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 15px var(--hover-shadow-primary);
}

/* ===== LIGHT MODE TABLE STYLING ===== */
/* Table background and border colors (match HTML export) */
.markdown-body table { background-color: var(--table-bg); border-color: var(--border-color); }
.markdown-body table tr { background-color: var(--table-bg); border-top: 1px solid var(--border-color); }
.markdown-body table tr:nth-child(2n) { background-color: var(--table-row-alt); }
.markdown-body table th, .markdown-body table td { border: 1px solid var(--border-color); }

/* ===== LIGHT MODE CODE BLOCK STYLING ===== */
/* Pre-formatted code block backgrounds */
.markdown-body pre {
  background-color: var(--code-pre-bg);
  font-family: "JetBrains Mono", "Fira Code", "Consolas", "Monaco", "Lucida Console", monospace;
  font-feature-settings: "liga" 1, "calt" 1;
}

/* Inline code styling */
.markdown-body code:not(pre code) {
  background-color: var(--code-inline-bg);
  color: var(--code-inline-color);
  font-weight: 600;
  border-radius: 3px;
  padding: 0.2em 0.4em;
  font-family: "JetBrains Mono", "Fira Code", "Consolas", "Monaco", "Lucida Console", monospace;
  font-feature-settings: "liga" 1, "calt" 1;
}

.markdown-body pre code {
  background: transparent;
  font-family: "JetBrains Mono", "Fira Code", "Consolas", "Monaco", "Lucida Console", monospace;
  font-feature-settings: "liga" 1, "calt" 1;
}

/* ==============================================
   LIGHT THEME STYLES
   ============================================== */

/* Light theme view controls with subtle border */
[data-theme="light"] .view-controls {
  border: 1px solid var(--view-border); /* Semi-transparent black border */
}

/* Light theme view button hover effects for better contrast */
[data-theme="light"] .view-btn:hover {
  background: var(--button-hover); /* Use CSS custom property for consistency */
  color: var(--text-color); /* Black text for maximum contrast in light mode */
}

/* Light theme active view button styling */
[data-theme="light"] .view-btn.active {
  background: var(--button-hover);
  color: var(--text-color); /* Black text for better readability */
  -webkit-backdrop-filter: blur(8px); /* Webkit prefix for Safari support */
  backdrop-filter: blur(8px); /* Glass-morphism effect */
}

/* Light theme separator between view buttons */
[data-theme="light"] .view-btn + .view-btn {
  border-left: 1px solid var(--view-border); /* Vertical divider line */
}

/* Light theme utility button base styling */
[data-theme="light"] .utility-btn {
  border: 1px solid var(--button-border); /* Consistent border style */
}

/* Light theme utility button hover effects with elevation */
[data-theme="light"] .utility-btn:hover {
  background: var(--button-hover);
  transform: translateY(-1px); /* Subtle lift effect on hover */
  color: var(--text-color); /* Ensure high contrast text */
  border-color: var(--accent-color); /* Highlight border with accent color */
  box-shadow: 0 4px 12px var(--shadow-light); /* Soft shadow for depth */
}

/* Light theme blockquote styling for readability */
[data-theme="light"] .markdown-body blockquote {
  color: var(--blockquote-color); /* Medium gray for quoted content */
}

[data-theme="light"] .markdown-body blockquote p {
  color: var(--blockquote-color); /* Consistent paragraph color within blockquotes */
}

/* Light theme quote marks styling */
[data-theme="light"] .markdown-body blockquote::before,
[data-theme="light"] .markdown-body blockquote::after {
  color: var(--blockquote-color); /* Match the blockquote text color */
}

/* Light theme horizontal rules - clean separator lines */
[data-theme="light"] .markdown-body hr {
  background-color: var(--hr-color); /* Light gray horizontal line */
  border: none; /* Remove default styling */
  height: 1px; /* Thin, clean line */
  margin: 2em 0; /* Generous vertical spacing */
}

/* Light theme scrollbar styling for various panes */
[data-theme="light"] .editor-pane::-webkit-scrollbar-track,
[data-theme="light"] .preview-pane::-webkit-scrollbar-track,
[data-theme="light"] #markdown-editor::-webkit-scrollbar-track {
  background: var(--scrollbar-track-light); /* Light track background */
  border-radius: 5px; /* Rounded corners */
}

/* Light theme scrollbar thumb (draggable part) */
[data-theme="light"] .editor-pane::-webkit-scrollbar-thumb,
[data-theme="light"] .preview-pane::-webkit-scrollbar-thumb,
[data-theme="light"] #markdown-editor::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-light); /* Semi-transparent dark thumb */
  border-radius: 5px;
  border: 1px solid var(--view-border); /* Subtle border */
}

/* Light theme scrollbar thumb hover effects */
[data-theme="light"] .editor-pane::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .preview-pane::-webkit-scrollbar-thumb:hover,
[data-theme="light"] #markdown-editor::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover); /* Darker on hover */
  box-shadow: 0 0 10px var(--shadow-strong); /* Glow effect */
}

/* Light theme toolbar separator styling */
[data-theme="light"] .toolbar-separator {
  background-color: var(--separator-color); /* Semi-transparent divider */
}

/* Light theme dropzone (drag & drop area) base styling */
[data-theme="light"] .dropzone {
  border: 2px dashed var(--dropzone-border); /* Dashed border indicates drop area */
  background-color: var(--dropzone-bg-subtle); /* Very subtle background tint */
}

/* Light theme active dropzone (when dragging over) */
[data-theme="light"] .dropzone.active {
  border-color: var(--dropzone-active-border); /* Stronger border when active */
  background-color: var(--dropzone-active-bg); /* Slight background change */
  box-shadow: 0 8px 25px var(--shadow-light); /* Elevation shadow */
}

/* Light theme dropzone text styling */
[data-theme="light"] .dropzone p {
  color: var(--blockquote-color); /* Medium gray instructional text */
}

/* Light theme dropzone hover effects */
[data-theme="light"] .dropzone:hover {
  border-color: var(--dropzone-hover-border); /* Darker border on hover */
  background-color: var(--dropzone-hover-bg); /* Slightly more visible background */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* Soft hover shadow */
}

[data-theme="light"] .dropzone:hover p {
  color: var(--logo-text); /* Darker text on hover for better visibility */
}

/* Light theme logo icon styling */
[data-theme="light"] .logo-icon {
  background: var(--logo-bg); /* Light semi-transparent background */
  border: 1px solid var(--logo-border); /* Defined border */
  color: var(--logo-text); /* Dark text for contrast */
  box-shadow: 0 4px 12px var(--shadow-medium); /* Depth shadow */
}

/* Light theme logo icon hover effects */
[data-theme="light"] .logo-icon:hover {
  background: var(--logo-hover-bg); /* Slightly darker on hover */
  border-color: var(--logo-hover-border); /* Stronger border */
  box-shadow: 0 6px 20px var(--shadow-strong); /* Enhanced shadow */
}

/* Light theme brand title hover effects */
[data-theme="light"] .brand-title:hover {
  color: var(--logo-text);
  text-shadow: 0 0 10px var(--shadow-strong); /* Subtle text glow */
}

[data-theme="light"] .brand-subtitle:hover {
  color: var(--logo-text); /* Consistent dark text on hover */
}

/* Light theme GitHub badge styling */
[data-theme="light"] .github-badge {
  border: 1px solid var(--button-border); /* Consistent border styling */
}

/* Light theme action button base styling */
[data-theme="light"] .action-btn {
  border: 1px solid var(--button-border); /* Standard border */
}

/* Light theme action button hover effects with elevation */
[data-theme="light"] .action-btn:hover {
  background: var(--button-hover);
  transform: translateY(-1px); /* Lift effect */
  color: var(--text-color); /* High contrast text */
  border-color: var(--accent-color); /* Accent color border */
  box-shadow: 0 4px 12px var(--shadow-light); /* Hover shadow */
}

/* Light theme sync button disabled state */
[data-theme="light"] .action-btn.sync-disabled {
  border-color: var(--button-border); /* Muted border for disabled state */
  background: var(--button-bg); /* Default background */
}

/* Light theme sync button enabled state */
[data-theme="light"] .action-btn.sync-enabled {
  background: var(--button-hover); /* Active background */
  color: var(--text-color); /* High contrast text */
  -webkit-backdrop-filter: blur(8px); /* Safari compatibility */
  backdrop-filter: blur(8px); /* Glass-morphism effect */
}