/* ==========================================================================
   theme.css - Unified Dark / Light Design System Tokens & Parity Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens - Dark Theme (Default)
   -------------------------------------------------------------------------- */
:root,
:root[data-theme="dark"] {
  --theme-name: dark;

  /* Background Palette */
  --bg-primary: #0B0F19;
  --bg-main: #0B0F19;
  --bg-secondary: #0F172A;
  --bg-surface: #111827;
  --bg-surface-elevated: #1F2937;
  --bg-card: #111827;
  --bg-card-hover: #1E293B;
  --bg-hover: rgba(255, 255, 255, 0.08);
  --bg-active: rgba(99, 102, 241, 0.18);
  --card-bg: #111827;

  /* Borders & Dividers */
  --border-color: #1F2937;
  --border-subtle: #1F2937;
  --border-focus: #6366F1;
  --border-active: rgba(99, 102, 241, 0.6);
  --card-border: #1F2937;

  /* Typography */
  --text-primary: #F9FAFB;
  --text-main: #F9FAFB;
  --text-secondary: #9CA3AF;
  --text-muted: #9CA3AF;
  --text-inverse: #0F172A;

  /* Elevation & Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 24px rgba(99, 102, 241, 0.25);
  --shadow-pdf: 0 14px 45px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   2. Design Tokens - Light Theme
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  --theme-name: light;

  /* Background Palette */
  --bg-primary: #F8FAFC;
  --bg-main: #F8FAFC;
  --bg-secondary: #F1F5F9;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F1F5F9;
  --bg-hover: rgba(0, 0, 0, 0.05);
  --bg-active: rgba(99, 102, 241, 0.12);
  --card-bg: #FFFFFF;

  /* Borders & Dividers */
  --border-color: #E2E8F0;
  --border-subtle: #E2E8F0;
  --border-focus: #4F46E5;
  --border-active: rgba(79, 70, 229, 0.5);
  --card-border: #E2E8F0;

  /* Typography */
  --text-primary: #0F172A;
  --text-main: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --text-inverse: #FFFFFF;

  /* Elevation & Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 4px 20px rgba(15, 23, 42, 0.07);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.18);
  --shadow-pdf: 0 10px 30px rgba(15, 23, 42, 0.15), 0 2px 6px rgba(15, 23, 42, 0.08);
}

/* --------------------------------------------------------------------------
   3. Theme Toggle Button Styling
   -------------------------------------------------------------------------- */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  min-width: 38px;
  height: 38px;
  border-radius: var(--radius-md, 10px);
  background: var(--bg-surface-elevated, rgba(30, 41, 67, 0.85));
  color: var(--text-primary, #F8FAFC);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  flex-shrink: 0;
  text-decoration: none;
}

.theme-toggle-btn svg,
.theme-toggle-btn i {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-toggle-btn:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.12));
  border-color: var(--border-focus, #6366F1);
  color: var(--primary, #6366F1);
  transform: translateY(-1px);
}

.theme-toggle-btn:hover svg,
.theme-toggle-btn:hover i {
  transform: rotate(18deg) scale(1.1);
}

.theme-toggle-btn:active {
  transform: translateY(0) scale(0.96);
}

/* --------------------------------------------------------------------------
   4. Dark Mode Heading & Contrast Rules
   -------------------------------------------------------------------------- */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .hero-title,
[data-theme="dark"] .hero-header h1,
[data-theme="dark"] .page-title,
[data-theme="dark"] .section-title,
[data-theme="dark"] .seo-title,
[data-theme="dark"] .tool-title,
[data-theme="dark"] .card-title,
[data-theme="dark"] .dropzone-title,
[data-theme="dark"] .brand-title,
[data-theme="dark"] .footer-brand-title {
  color: #F9FAFB !important;
}

[data-theme="dark"] .hero-header p,
[data-theme="dark"] .hero-desc,
[data-theme="dark"] .hero-subtitle,
[data-theme="dark"] .page-lead,
[data-theme="dark"] .page-subtitle,
[data-theme="dark"] .dropzone-subtitle,
[data-theme="dark"] .card-desc,
[data-theme="dark"] .card p,
[data-theme="dark"] .seo-subtitle,
[data-theme="dark"] .feature-box p,
[data-theme="dark"] .step-card p,
[data-theme="dark"] .faq-answer,
[data-theme="dark"] .faq-item p,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary {
  color: #9CA3AF !important;
}

/* --------------------------------------------------------------------------
   5. Light Mode Component Overrides & High-Contrast Polish
   -------------------------------------------------------------------------- */
[data-theme="light"] body {
  background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.04), transparent 50%), #F8FAFC !important;
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

[data-theme="light"] .app-layout,
[data-theme="light"] .app-wrapper,
[data-theme="light"] .main-container {
  background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.04), transparent 50%), #F8FAFC !important;
}

[data-theme="light"] .top-nav {
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

[data-theme="light"] .nav-brand {
  color: #0F172A !important;
}

/* Headings in Light Mode: Dark slate text (#0F172A) with 18:1 contrast */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .hero-title,
[data-theme="light"] .hero-header h1,
[data-theme="light"] .page-title,
[data-theme="light"] .section-title,
[data-theme="light"] .seo-title,
[data-theme="light"] .tool-title,
[data-theme="light"] .card-title,
[data-theme="light"] .dropzone-title,
[data-theme="light"] .brand-title,
[data-theme="light"] .footer-brand-title,
[data-theme="light"] .pages-grid-title,
[data-theme="light"] .config-title,
[data-theme="light"] .control-card-title,
[data-theme="light"] .pwd-header-text h3,
[data-theme="light"] .success-card h3 {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: initial !important;
  color: #0F172A !important;
}

/* Gradient Text inside Headings: Rich saturated indigo gradient (contrast > 5.5:1) */
[data-theme="light"] .gradient-text {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Subheadings & Paragraphs in Light Mode: Crisp Slate-600 (#475569) (contrast 5.9:1) */
[data-theme="light"] .hero-header p,
[data-theme="light"] .hero-desc,
[data-theme="light"] .hero-subtitle,
[data-theme="light"] .page-lead,
[data-theme="light"] .page-subtitle,
[data-theme="light"] .dropzone-subtitle,
[data-theme="light"] .card-desc,
[data-theme="light"] .card p,
[data-theme="light"] .seo-subtitle,
[data-theme="light"] .feature-box p,
[data-theme="light"] .step-card p,
[data-theme="light"] .faq-answer,
[data-theme="light"] .faq-item p,
[data-theme="light"] .text-muted,
[data-theme="light"] .text-secondary {
  color: #475569 !important;
}

/* Badges & Pills in Light Mode: High-contrast legible badges */
[data-theme="light"] .badge,
[data-theme="light"] .brand-badge,
[data-theme="light"] .badge-pill,
[data-theme="light"] .date-badge,
[data-theme="light"] .meta-chip,
[data-theme="light"] .badge-client-side {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
}

[data-theme="light"] .hero-badge,
[data-theme="light"] .badge-emerald {
  background: #ECFDF5 !important;
  color: #047857 !important;
  border: 1px solid #A7F3D0 !important;
}

/* Buttons in Light Mode */
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-ghost,
[data-theme="light"] .btn-outline {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-ghost:hover,
[data-theme="light"] .btn-outline:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

/* Cards & Surfaces in Light Mode */
[data-theme="light"] .card,
[data-theme="light"] .tool-card,
[data-theme="light"] .seo-card,
[data-theme="light"] .feature-box,
[data-theme="light"] .step-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .option-card,
[data-theme="light"] .mode-card,
[data-theme="light"] .setting-card,
[data-theme="light"] .file-card,
[data-theme="light"] .grid-item,
[data-theme="light"] .page-card,
[data-theme="light"] .preview-card-frame,
[data-theme="light"] .hero-section-card,
[data-theme="light"] .info-box {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  color: #0F172A !important;
}

[data-theme="light"] .card:hover,
[data-theme="light"] .grid-item:hover {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .card h3,
[data-theme="light"] .tool-card h3,
[data-theme="light"] .feature-box h4,
[data-theme="light"] .step-card h3,
[data-theme="light"] .faq-question h3 {
  color: #0F172A !important;
}

/* Dropzones in Light Mode */
[data-theme="light"] .dropzone,
[data-theme="light"] .dropzone-container,
[data-theme="light"] .upload-area,
[data-theme="light"] .upload-card,
[data-theme="light"] .file-drop-area {
  background: rgba(241, 245, 249, 0.75) !important;
  border-color: #CBD5E1 !important;
}

[data-theme="light"] .dropzone:hover,
[data-theme="light"] .dropzone-container:hover,
[data-theme="light"] .dropzone.dragover,
[data-theme="light"] .dropzone-container.dragover,
[data-theme="light"] .upload-area:hover,
[data-theme="light"] .upload-area.dragover {
  background: rgba(99, 102, 241, 0.06) !important;
  border-color: #6366F1 !important;
}

/* Form Controls in Light Mode */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="search"],
[data-theme="light"] select,
[data-theme="light"] textarea {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: #6366F1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* Tables in Light Mode */
[data-theme="light"] .comparison-table th,
[data-theme="light"] .table th {
  background: #F8FAFC !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}

[data-theme="light"] .comparison-table td,
[data-theme="light"] .table td {
  border-color: #E2E8F0 !important;
  color: #334155 !important;
}

[data-theme="light"] .comparison-table tr:hover td {
  background: #F8FAFC !important;
}

[data-theme="light"] .faq-question {
  color: #0F172A !important;
}

/* Footer & Cookie Banner in Light Mode */
[data-theme="light"] .site-footer {
  background: #F8FAFC !important;
  border-top-color: #E2E8F0 !important;
  color: #64748B !important;
}

[data-theme="light"] .site-footer a {
  color: #475569 !important;
}

[data-theme="light"] .site-footer a:hover {
  color: #6366F1 !important;
}

[data-theme="light"] .cookie-banner {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12) !important;
}

[data-theme="light"] .cookie-banner .cookie-text,
[data-theme="light"] .cookie-text {
  color: #334155 !important;
}

[data-theme="light"] .cookie-banner .cookie-text span,
[data-theme="light"] .cookie-text span {
  color: #334155 !important;
}

[data-theme="light"] .cookie-banner .cookie-text a,
[data-theme="light"] .cookie-text a {
  color: #4F46E5 !important;
}

[data-theme="light"] .cookie-banner .cookie-text a:hover,
[data-theme="light"] .cookie-text a:hover {
  color: #4338CA !important;
}

[data-theme="light"] .cookie-banner .cookie-icon-wrapper,
[data-theme="light"] .cookie-icon-wrapper {
  background: rgba(99, 102, 241, 0.1) !important;
  border-color: rgba(99, 102, 241, 0.25) !important;
  color: #4F46E5 !important;
}

/* Dark Mode Cookie Banner */
[data-theme="dark"] .cookie-banner {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(99, 102, 241, 0.15) !important;
}

[data-theme="dark"] .cookie-banner .cookie-text,
[data-theme="dark"] .cookie-text {
  color: #CBD5E1 !important;
}

[data-theme="dark"] .cookie-banner .cookie-text span,
[data-theme="dark"] .cookie-text span {
  color: #CBD5E1 !important;
}

[data-theme="dark"] .cookie-banner .cookie-text a,
[data-theme="dark"] .cookie-text a {
  color: #818CF8 !important;
}

[data-theme="dark"] .cookie-banner .cookie-text a:hover,
[data-theme="dark"] .cookie-text a:hover {
  color: #A5B4FC !important;
}


/* Modals & Dialogs in Light Mode */
[data-theme="light"] .modal-content,
[data-theme="light"] .modal-card,
[data-theme="light"] .dialog-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

/* Floating Toolbars in Light Mode */
[data-theme="light"] .tool-dock,
[data-theme="light"] .bottom-dock,
[data-theme="light"] .floating-toolbar,
[data-theme="light"] .props-bar {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] .tool-btn {
  color: #475569 !important;
}

[data-theme="light"] .tool-btn:hover {
  color: #6366F1 !important;
  background: rgba(99, 102, 241, 0.08) !important;
}

[data-theme="light"] .tool-btn.active {
  color: #6366F1 !important;
  background: rgba(99, 102, 241, 0.15) !important;
}

[data-theme="light"] #canvas-stage-wrapper {
  background-color: #E2E8F0 !important;
}

[data-theme="light"] .breadcrumb-nav a {
  color: #64748B !important;
}

[data-theme="light"] .breadcrumb-current {
  color: #0F172A !important;
}

[data-theme="light"] .step-number {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #FFFFFF !important;
}

/* Callouts, Highlight Boxes & Alert Banners in Light Mode (WCAG AA / AAA Compliant) */
[data-theme="light"] .callout-box {
  background: #F0FDF4 !important;
  border-color: #A7F3D0 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.08) !important;
}

[data-theme="light"] .callout-title {
  color: #065F46 !important;
}

[data-theme="light"] .callout-title i,
[data-theme="light"] .callout-title svg {
  color: #059669 !important;
  stroke: #059669 !important;
}

[data-theme="light"] .callout-item {
  color: #064E3B !important;
  font-weight: 500;
}

[data-theme="light"] .callout-item span {
  color: #064E3B !important;
}

[data-theme="light"] .callout-item i,
[data-theme="light"] .callout-item svg {
  color: #059669 !important;
  stroke: #059669 !important;
}

[data-theme="light"] .danger-box {
  background: #FFF1F2 !important;
  border-color: #FECDD3 !important;
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.08) !important;
}

[data-theme="light"] .danger-title {
  color: #9F1239 !important;
}

[data-theme="light"] .danger-title i,
[data-theme="light"] .danger-title svg {
  color: #E11D48 !important;
  stroke: #E11D48 !important;
}

[data-theme="light"] .danger-box .legal-paragraph,
[data-theme="light"] .danger-box p {
  color: #881337 !important;
  font-weight: 500;
}

[data-theme="light"] .highlight-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .highlight-icon {
  background: #EFF6FF !important;
  color: #2563EB !important;
  border-color: #DBEAFE !important;
}

[data-theme="light"] .highlight-icon i,
[data-theme="light"] .highlight-icon svg {
  color: #2563EB !important;
  stroke: #2563EB !important;
}

[data-theme="light"] .highlight-text h4 {
  color: #0F172A !important;
}

[data-theme="light"] .highlight-text p {
  color: #475569 !important;
}

[data-theme="light"] .legal-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .section-header {
  color: #0F172A !important;
  border-bottom-color: #E2E8F0 !important;
}

[data-theme="light"] .section-header i,
[data-theme="light"] .section-header svg {
  color: #2563EB !important;
  stroke: #2563EB !important;
}

[data-theme="light"] .legal-paragraph {
  color: #334155 !important;
}

[data-theme="light"] .legal-link {
  color: #1D4ED8 !important;
}

[data-theme="light"] .legal-link:hover {
  color: #1E40AF !important;
}

[data-theme="light"] .contact-box {
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
}

[data-theme="light"] .contact-info h4 {
  color: #0F172A !important;
}

[data-theme="light"] .contact-info p {
  color: #475569 !important;
}

[data-theme="light"] .success-banner {
  background: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
  color: #065F46 !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.08) !important;
}

[data-theme="light"] .success-banner i,
[data-theme="light"] .success-banner svg {
  color: #059669 !important;
  stroke: #059669 !important;
}

[data-theme="light"] .info-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .info-icon-box {
  background: #EFF6FF !important;
  border-color: #DBEAFE !important;
  color: #2563EB !important;
}

[data-theme="light"] .info-icon-box i,
[data-theme="light"] .info-icon-box svg {
  color: #2563EB !important;
  stroke: #2563EB !important;
}

[data-theme="light"] .info-card-text h4 {
  color: #0F172A !important;
}

[data-theme="light"] .info-card-text p {
  color: #475569 !important;
}

[data-theme="light"] .email-card {
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.06) !important;
}

[data-theme="light"] .email-header {
  color: #1D4ED8 !important;
}

[data-theme="light"] .email-header i,
[data-theme="light"] .email-header svg {
  color: #1D4ED8 !important;
  stroke: #1D4ED8 !important;
}

[data-theme="light"] .email-address {
  color: #0F172A !important;
}