/* Explorer's Sketchbook Theme */
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Patrick+Hand&family=Shadows+Into+Light&display=swap');

body[data-theme="sketchbook"] {
  background: 
    linear-gradient(135deg, #8b7355 0%, #6b5d4f 50%, #4a3e32 100%),
    repeating-linear-gradient(45deg, transparent, transparent 50px, rgba(139, 115, 85, 0.1) 50px, rgba(139, 115, 85, 0.1) 100px);
  --bg-primary: #f5f1e8;
  --bg-secondary: #ede8d8;
  --bg-tertiary: #e6dfcc;
  --text-primary: #3d2817;
  --text-secondary: #5d4e37;
  --text-tertiary: #6b5d4f;
  --accent-primary: #8b7355;
  --accent-secondary: #6b5d4f;
  --border-color: #8b7355;
  --font-title: 'Kalam', cursive;
  --font-subtitle: 'Shadows Into Light', cursive;
  --font-body: 'Patrick Hand', cursive;
  --font-date: 'Shadows Into Light', cursive;
  --decoration-icon: '🗺';
  --shadow-primary: 0 0 30px rgba(0, 0, 0, 0.3);
  --shadow-secondary: inset 0 0 100px rgba(139, 115, 85, 0.05);
}

body[data-theme="sketchbook"] .journal-container {
  background: 
    linear-gradient(135deg, #f5f1e8 0%, #ede8d8 50%, #e6dfcc 100%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="%23f5f1e8"/><circle cx="20" cy="20" r="1" fill="%23d4c4a8" opacity="0.3"/><circle cx="80" cy="40" r="1" fill="%23d4c4a8" opacity="0.3"/><circle cx="50" cy="70" r="1" fill="%23d4c4a8" opacity="0.3"/></svg>');
  border: 2px solid #8b7355;
  transform: rotate(0.3deg);
}

body[data-theme="sketchbook"] .journal-title {
  transform: rotate(-0.5deg);
  display: inline-block;
  font-size: 3.5rem;
}

body[data-theme="sketchbook"] .journal-subtitle {
  transform: rotate(0.8deg);
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
}

body[data-theme="sketchbook"] .section-title {
  border-bottom: 2px dashed #8b7355;
  transform: rotate(-0.3deg);
  display: inline-block;
  font-size: 2rem;
}

body[data-theme="sketchbook"] .entry {
  background: rgba(255, 255, 255, 0.4);
  padding: 1.5rem;
  border-left: 3px solid #8b7355;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: rotate(0.2deg);
}

body[data-theme="sketchbook"] .entry:nth-child(even) {
  transform: rotate(-0.2deg);
}

body[data-theme="sketchbook"] .entry-date {
  font-weight: 700;
  font-size: 1.1rem;
}

body[data-theme="sketchbook"] .tool-card {
  background: rgba(255, 255, 255, 0.5);
  border: 2px dashed #8b7355;
  transform: rotate(-0.5deg);
}

body[data-theme="sketchbook"] .tool-card:nth-child(even) {
  transform: rotate(0.5deg);
}

body[data-theme="sketchbook"] .tool-card:hover {
  transform: translateY(-5px) rotate(0deg) !important;
  border-style: solid;
  border-color: #6b5d4f;
}

body[data-theme="sketchbook"] .tool-card::before {
  background: #f5f1e8;
  border: 2px dashed #8b7355;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 1.5rem;
}

body[data-theme="sketchbook"] .decorative-line {
  height: 1px;
  background: repeating-linear-gradient(to right, 
    transparent 0px, 
    transparent 10px, 
    #8b7355 10px, 
    #8b7355 12px);
  transform: rotate(0.5deg);
  position: relative;
}

body[data-theme="sketchbook"] .decorative-line::before,
body[data-theme="sketchbook"] .decorative-line::after {
  content: '✎';
  position: absolute;
  top: -12px;
  color: #8b7355;
  font-size: 1.3rem;
}

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

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

/* Watercolor splashes */
body[data-theme="sketchbook"] .journal-container::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  background: #d4a574;
  border-radius: 50% 40% 60% 30%;
  opacity: 0.15;
  filter: blur(15px);
  top: 5%;
  right: 10%;
  transform: rotate(25deg);
  pointer-events: none;
}

body[data-theme="sketchbook"] .journal-container::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  background: #a8c4a0;
  border-radius: 50% 40% 60% 30%;
  opacity: 0.15;
  filter: blur(15px);
  bottom: 15%;
  left: 8%;
  transform: rotate(-35deg);
  pointer-events: none;
}