@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,600;0,700;1,400&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'JetBrains Mono', monospace !important;
}
h1 { letter-spacing: -0.03em; }
h2, h3 { letter-spacing: -0.02em; }

/* ── Global background ────────────────────────────────────── */
body {
  background-color: #08080d !important;
}

/* ── Header: replace gradient with dark panel ─────────────── */
header {
  background: #0c0c14 !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
}

/* ── Mobile menu ──────────────────────────────────────────── */
nav#mobile-menu {
  background: #0c0c14 !important;
  background-image: none !important;
}

/* ── Footer: replace gradient with dark panel ─────────────── */
footer {
  background: #0c0c14 !important;
  background-image: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* ── Cards / sections: strip zinc gradient → minimal dark ─── */
div[class*="from-zinc-800"],
section[class*="from-zinc-800"] {
  background: #10101a !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* ── Heading text gradients: dark blue → vivid blue/cyan ──── */
.text-transparent.bg-clip-text {
  background-image: linear-gradient(135deg, #60a5fa 0%, #22d3ee 100%) !important;
}