/* Metal Tales - High-End Industrial Blacksmithing Design System */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');

:root {
  --forge-orange: #ea580c;
  --forge-orange-hover: #c2410c;
  --forge-amber: #f59e0b;
  --forge-gold: #d97706;
  --iron-black: #090d16;
  --iron-slate: #1e293b;
  --iron-steel: #334155;
  --iron-border: #e2e8f0;
  --iron-bg-clean: #ffffff;
  --iron-bg-muted: #f8fafc;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #0f172a;
  background-color: var(--iron-bg-clean);
  -webkit-font-smoothing: antialiased;
}

.font-heading-forge {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.03em;
}

.text-gradient-ember {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #d97706 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-steel {
  background: linear-gradient(135deg, #0f172a 0%, #475569 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-mesh-dark {
  background-color: #060911;
  background-image: 
    radial-gradient(at 0% 0%, rgba(234, 88, 12, 0.22) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(217, 119, 6, 0.15) 0px, transparent 50%),
    radial-gradient(rgba(249, 115, 22, 0.1) 1px, transparent 0);
  background-size: 100% 100%, 100% 100%, 32px 32px;
}

/* Card aesthetics tailored for Blacksmith niche */
.card-forge {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #e2e8f0;
  background: #ffffff;
}

.card-forge:hover {
  transform: translateY(-6px);
  border-color: rgba(234, 88, 12, 0.4);
  box-shadow: 0 20px 30px -10px rgba(15, 23, 42, 0.08), 0 8px 16px -4px rgba(234, 88, 12, 0.12);
}

.badge-ember {
  background: linear-gradient(135deg, #ea580c 0%, #d97706 100%);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(234, 88, 12, 0.3);
}

.badge-steel {
  background: #0f172a;
  color: #f8fafc;
}

.prose-forge {
  font-family: 'Merriweather', Georgia, serif;
  line-height: 1.9;
  color: #334155;
}

.prose-forge h2, .prose-forge h3, .prose-forge h4 {
  font-family: 'Inter', sans-serif;
  color: #0f172a;
  font-weight: 800;
}