/* Metal Guitar Lessons — DAPE custom layer on Tailwind */
:root {
  --bg: #0b0c0e;
  --bg-elev: #14161a;
  --bg-card: #1a1d23;
  --border: #2a2e36;
  --text: #e8eaed;
  --muted: #9aa0a6;
  --accent: #e8a317;
  --accent-2: #c44b2b;
  --link: #f0c14b;
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-feature-settings: "ss01","cv11"; }

.prose-dark h2 { color: #fff; margin-top: 2rem; }
.prose-dark a { color: var(--link); }
.prose-dark code { background: #23262c; padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.9em; }

.hero-grid {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(232,163,23,0.12), transparent),
    linear-gradient(180deg, #0b0c0e 0%, #0b0c0e 100%);
}

.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; }
.card:hover { border-color: #3a404a; }

kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #23262c;
  border: 1px solid #3a404a;
  border-radius: 4px;
  padding: 0 0.35em;
  font-size: 0.85em;
}