@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800;900&family=Press+Start+2P&display=swap');
@import "tailwindcss";

@theme {
  --font-pixel: "Press Start 2P", system-ui, sans-serif;
  --font-gothic: "Nunito", system-ui, sans-serif;
  
  --color-sky-blue: #F8F5EE;
  --color-parchment: #F3EBD8;
  --color-panel: #FFFDF7;
  --color-wood: #7A5335;
  --color-border: #4A3528;
  --color-forest: #7CC576;
  --color-orange: #FF8A65;
}

@layer utilities {
  .pixel-shadow {
    box-shadow: 4px 4px 0px 0px var(--color-border);
  }
  .pixel-shadow-sm {
    box-shadow: 2px 2px 0px 0px var(--color-border);
  }
  .pixel-shadow-inner {
    box-shadow: inset 4px 4px 0px 0px rgba(92, 64, 51, 0.2);
  }
  .pixel-border {
    border: 3px solid var(--color-border);
    border-radius: 8px;
  }
  .pixel-border-sm {
    border: 2px solid var(--color-border);
    border-radius: 6px;
  }
}

body {
  background-color: #F8F5EE;
  color: var(--color-border);
  font-family: var(--font-gothic);
  background-image: 
    linear-gradient(90deg, rgba(92,64,51,0.05) 1px, transparent 1px),
    linear-gradient(rgba(92,64,51,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}