/* Global Reset & Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color 150ms linear, color 150ms linear;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent-primary);
  text-decoration: none;
}

a:hover {
  color: var(--accent-primary-hover);
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* Layout Container */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

main {
  flex: 1;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

h1 { font-size: clamp(1.85rem, 5vw, 2.75rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.35rem, 4vw, 1.85rem); letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; }

p {
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

/* Performance Boost */
.card, .app-card, .content-box {
  contain-intrinsic-size: 200px;
  content-visibility: auto;
}

#popular-tools-grid, #categories-grid {
  min-height: 250px;
}

/* Form Elements Styling */
input,
textarea,
select,
.editor-input,
.editor-textarea,
.editor-select {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

.config-grid,
.content-box,
.section-card,
.input-card,
.card,
.app-card,
.drop-zone,
.related-card,
.options-grid,
.result-box,
.editor-card {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm);
}

label,
.option-item {
  color: var(--text-primary) !important;
}

/* =======================================================
   ALL HEADINGS & TEXT CONTRAST (DARK & LIGHT THEMES)
   ======================================================= */

/* --- DARK THEME TEXT FIXES --- */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] .hero h1,
[data-theme="dark"] main h1,
[data-theme="dark"] .container h1,
[data-theme="dark"] .tool-header h1,
[data-theme="dark"] .page-title,
html.dark h1,
html.dark h2,
html.dark h3 {
  color: #ffffff !important;
}

[data-theme="dark"] p,
[data-theme="dark"] .tool-desc,
[data-theme="dark"] .hero p,
[data-theme="dark"] .content-box p,
[data-theme="dark"] .content-box li,
html.dark p {
  color: #94a3b8 !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

/* --- LIGHT THEME TEXT FIXES --- */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] .hero h1,
[data-theme="light"] main h1,
[data-theme="light"] .container h1,
[data-theme="light"] .tool-header h1,
[data-theme="light"] .page-title {
  color: #0f172a !important;
}

[data-theme="light"] p,
[data-theme="light"] .tool-desc,
[data-theme="light"] .hero p,
[data-theme="light"] .content-box p,
[data-theme="light"] .content-box li {
  color: #475569 !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

/* Fix Related Cards & Subtitle Text */
.related-card span,
.related-card p,
.tool-card p,
.card p {
  color: var(--text-secondary) !important;
}

/* Fix Form Labels & Strong Text */
label, .form-label, strong {
  color: var(--text-primary) !important;
}

/* Tab Buttons Text Visibility */
.tab-btn,
.mode-btn,
.btn-toggle,
button[class*="tab"],
button[class*="mode"] {
  color: var(--text-primary) !important;
  transition: all var(--transition-fast);
}

[data-theme="light"] .tab-btn:not(.active),
[data-theme="light"] .mode-btn:not(.active) {
  background-color: var(--bg-tertiary, #f1f5f9) !important;
  color: #334155 !important;
  border: 1px solid var(--border-color, #cbd5e1) !important;
}

[data-theme="dark"] .tab-btn:not(.active),
[data-theme="dark"] .mode-btn:not(.active) {
  background-color: var(--bg-tertiary, #1e293b) !important;
  color: #cbd5e1 !important;
  border: 1px solid var(--border-color, #334155) !important;
}

.tab-btn.active,
.mode-btn.active {
  color: #ffffff !important;
}