@import url('https://fonts.googleapis.com/css2?family=BBH+Sans+Bartle&family=BBH+Sans+Bogle&display=swap');
@import "tailwindcss";

/* Base styles */
body {
  background-color: #0a0a0a;
  color: #fff;
  font-family: 'BBH Sans Bogle', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'BBH Sans Bartle', sans-serif;
  letter-spacing: -0.02em;
}

/* Topographic line pattern */
.topo-lines {
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 50px,
      rgba(255, 255, 255, 0.03) 50px,
      rgba(255, 255, 255, 0.03) 51px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 50px,
      rgba(255, 255, 255, 0.03) 50px,
      rgba(255, 255, 255, 0.03) 51px
    );
}

.topo-lines-dense {
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 20px,
      rgba(255, 255, 255, 0.02) 20px,
      rgba(255, 255, 255, 0.02) 21px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 20px,
      rgba(255, 255, 255, 0.02) 20px,
      rgba(255, 255, 255, 0.02) 21px
    );
}

/* Sharp borders and hover effects */
.sharp-border {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #000;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sharp-border:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* Grid overlay effect */
.grid-overlay {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
}