/* Steampunk Field Journal Theme */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&family=Share+Tech+Mono&family=Special+Elite&display=swap');

body[data-theme="steampunk"] {
  background: 
    radial-gradient(circle at 20% 30%, #1a1a1a 0%, #0a0a0a 100%),
    linear-gradient(135deg, #2c1810 0%, #1a0f08 100%);
  --bg-primary: #3d2817;
  --bg-secondary: #2d1f14;
  --bg-tertiary: #1f150d;
  --text-primary: #daa520;
  --text-secondary: #cd853f;
  --text-tertiary: #d4c4a8;
  --accent-primary: #8b6914;
  --accent-secondary: #daa520;
  --border-color: #8b6914;
  --font-title: 'Orbitron', sans-serif;
  --font-subtitle: 'Special Elite', cursive;
  --font-body: 'Share Tech Mono', monospace;
  --font-date: 'Special Elite', cursive;
  --decoration-icon: '⚙';
  --shadow-primary: 0 0 40px rgba(184, 134, 11, 0.3), inset 0 0 60px rgba(0, 0, 0, 0.4);
  --glow-primary: 0 0 10px rgba(218, 165, 32, 0.5);
}

body[data-theme="steampunk"] .journal-container {
  background: 
    linear-gradient(135deg, #3d2817 0%, #2d1f14 50%, #1f150d 100%),
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(139, 111, 71, 0.05) 10px, rgba(139, 111, 71, 0.05) 20px);
  box-shadow: 
    0 0 40px rgba(184, 134, 11, 0.3),
    inset 0 0 60px rgba(0, 0, 0, 0.4),
    0 0 0 8px #8b6914,
    0 0 0 12px #1a0f08;
  border: 4px solid #8b6914;
}

body[data-theme="steampunk"] .journal-title {
  text-shadow: 
    0 0 10px rgba(218, 165, 32, 0.5),
    2px 2px 4px rgba(0, 0, 0, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

body[data-theme="steampunk"] .journal-subtitle {
  letter-spacing: 0.1em;
}

body[data-theme="steampunk"] .journal-header {
  border-bottom: 3px solid #8b6914;
  padding-bottom: 1.5rem;
}

body[data-theme="steampunk"] .section-title {
  border-left: 4px solid #8b6914;
  border-bottom: none;
  padding-left: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

body[data-theme="steampunk"] .entry {
  background: rgba(0, 0, 0, 0.2);
  padding: 1.5rem;
  border-left: 3px solid #8b6914;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}

body[data-theme="steampunk"] .entry-date {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

body[data-theme="steampunk"] .tool-card {
  background: linear-gradient(135deg, rgba(61, 40, 23, 0.6) 0%, rgba(31, 21, 13, 0.8) 100%);
  box-shadow: 
    inset 0 0 20px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.3);
}

body[data-theme="steampunk"] .tool-card:hover {
  box-shadow: 
    inset 0 0 20px rgba(0, 0, 0, 0.4),
    0 4px 16px rgba(218, 165, 32, 0.3),
    0 0 20px rgba(218, 165, 32, 0.2);
  border-color: #daa520;
}

body[data-theme="steampunk"] .tool-card::before {
  background: #3d2817;
  border: 2px solid #8b6914;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
}

body[data-theme="steampunk"] .tool-name {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body[data-theme="steampunk"] .decorative-line {
  height: 2px;
  background: linear-gradient(to right, 
    transparent 0%, 
    #8b6914 20%, 
    #daa520 50%, 
    #8b6914 80%, 
    transparent 100%);
  position: relative;
}

body[data-theme="steampunk"] .decorative-line::before,
body[data-theme="steampunk"] .decorative-line::after {
  content: '⚙';
  position: absolute;
  top: -8px;
  color: #8b6914;
  font-size: 1.2rem;
}

body[data-theme="steampunk"] .decorative-line::before {
  left: 20%;
}

body[data-theme="steampunk"] .decorative-line::after {
  right: 20%;
}

/* Brass corners */
body[data-theme="steampunk"] .journal-container::before {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #cd853f 0%, #b8860b 50%, #8b6914 100%);
  border: 2px solid #daa520;
  box-shadow: 
    inset 0 0 10px rgba(255, 215, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.5);
  top: -4px;
  left: -4px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  pointer-events: none;
}

body[data-theme="steampunk"] .journal-container::after {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #cd853f 0%, #b8860b 50%, #8b6914 100%);
  border: 2px solid #daa520;
  box-shadow: 
    inset 0 0 10px rgba(255, 215, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.5);
  bottom: -4px;
  right: -4px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}