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

@layer base {
  body {
    @apply bg-paper-light text-paper-dark min-h-screen;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
  }
}

@layer utilities {
  .paper-card {
    @apply bg-paper-sand border-2 border-paper-brown shadow-paper;
  }

  .paper-card-light {
    @apply bg-paper-light border-2 border-paper-gray shadow-paper;
  }

  .paper-card-dark {
    @apply bg-paper-brown text-paper-light border-2 border-paper-dark shadow-paper-lg;
  }

  .cardboard-texture {
    background-image:
      repeating-linear-gradient(
        90deg,
        transparent,
        transparent 2px,
        rgba(47, 41, 38, 0.03) 2px,
        rgba(47, 41, 38, 0.03) 4px
      ),
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(47, 41, 38, 0.03) 2px,
        rgba(47, 41, 38, 0.03) 4px
      );
  }

  .torn-edge {
    position: relative;
  }

  .torn-edge::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background-image:
      linear-gradient(45deg, transparent 33.33%, currentColor 33.33%, currentColor 66.66%, transparent 66.66%),
      linear-gradient(-45deg, transparent 33.33%, currentColor 33.33%, currentColor 66.66%, transparent 66.66%);
    background-size: 8px 4px;
    background-repeat: repeat-x;
    opacity: 0.1;
  }
}