/* Apply Design Style Finder Pro Themes to Preview Paper (Container) */

#preview-paper {
  transition: all 0.3s ease;
}

#preview-paper[data-style-theme] {
  /* Base background (color or gradient) + Pattern overlay */
  background: var(--bg-pattern, none), var(--bg);
  background-size: var(--bg-pattern-size, auto), auto;
  background-repeat: repeat, no-repeat;
  background-position: center, center;
  
  color: var(--text);
  font-family: var(--font-body);
  border: 1px solid var(--border);
  
  /* Additional effects */
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Ensure content inherits or uses theme vars */
#preview-paper[data-style-theme] #preview-content {
  background: transparent;
  border: none;
  box-shadow: none;
  color: inherit;
}

/* Headings */
#preview-paper[data-style-theme] h1,
#preview-paper[data-style-theme] h2,
#preview-paper[data-style-theme] h3,
#preview-paper[data-style-theme] h4 {
  font-family: var(--font-heading);
  color: var(--text);
  border-bottom-color: var(--border);
}

/* Override Prose Colors when theme is active */
#preview-paper[data-style-theme] strong {
  color: var(--text);
  font-weight: 700;
}

#preview-paper[data-style-theme] a {
  color: var(--accent);
}

#preview-paper[data-style-theme] blockquote {
  border-left-color: var(--accent);
  color: var(--text-secondary);
  background: var(--bg-card);
}

#preview-paper[data-style-theme] code {
  color: var(--accent);
  background-color: var(--bg-hover);
  font-family: 'JetBrains Mono', monospace;
}

#preview-paper[data-style-theme] pre {
  background-color: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
}

#preview-paper[data-style-theme] pre code {
  color: inherit;
  background-color: transparent;
}

/* Lists */
#preview-paper[data-style-theme] ul > li::before {
  background-color: var(--text-muted);
}

/* Buttons inside preview (Edit buttons) */
#preview-paper[data-style-theme] button {
  background-color: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
#preview-paper[data-style-theme] button:hover {
  background-color: var(--bg-hover);
  color: var(--accent);
  border-color: var(--accent);
}

/* Horizontal Rule */
#preview-paper[data-style-theme] hr {
  border-color: var(--border);
}

/* Specific Theme Tweaks */
#preview-paper[data-style-theme="terminal"],
#preview-paper[data-style-theme="matrix"] {
  font-family: 'JetBrains Mono', monospace;
}

#preview-paper[data-style-theme="neon"] {
  text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);
}