/**
 * Texture Styles for The Forensic Brief
 * 25 Book/Paper/Document Background Textures
 * Pure CSS - No external images required
 * Each texture is independently testable
 */

/* ============================================================
   BASE TEXTURES - Use with body element
   Each class defines a complete background style
   ============================================================ */

/* 1. Plain White Paper */
.bg-plain-white {
  background-color: #FFFFFF;
  background-image: none;
}

/* 2. Off-White Book Paper (DEFAULT) */
.bg-off-white-book {
  background-color: #F8F7F4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
}

/* 3. Aged Paper - Subtle brown discoloration */
.bg-aged-paper {
  background-color: #EDE4D3;
  background-image: 
    linear-gradient(45deg, transparent 30%, rgba(139, 90, 43, 0.03) 30.5%, rgba(139, 90, 43, 0.03) 60%, transparent 60.5%),
    linear-gradient(-45deg, transparent 30%, rgba(139, 90, 43, 0.03) 30.5%, rgba(139, 90, 43, 0.03) 60%, transparent 60.5%);
  background-size: 4px 4px;
}

/* 4. Parchment Paper - Aged, textured appearance */
.bg-parchment {
  background-color: #E8DCC8;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(210, 180, 140, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(210, 180, 140, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 60%, rgba(139, 90, 43, 0.05) 0%, transparent 50%);
}

/* 5. Court Document Paper - Bright white, official */
.bg-court-document {
  background-color: #FEFEF9;
  background-image: 
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, 0.02) 2px, rgba(0, 0, 0, 0.02) 4px);
}

/* 6. Legal File Paper - Cream with subtle lines */
.bg-legal-file {
  background-color: #FFFBF0;
  background-image: 
    linear-gradient(180deg, transparent 24%, rgba(100, 100, 100, 0.03) 25%, rgba(100, 100, 100, 0.03) 26%, transparent 27%, transparent 74%, rgba(100, 100, 100, 0.03) 75%, rgba(100, 100, 100, 0.03) 76%, transparent 77%, transparent),
    repeating-linear-gradient(0deg, transparent 0px, transparent 40px, rgba(120, 100, 80, 0.02) 40px, rgba(120, 100, 80, 0.02) 41px);
  background-size: 100% 100%, 100% 100%;
}

/* 7. Old Manuscript - Aged, dark stains */
.bg-old-manuscript {
  background-color: #E8DCC0;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(101, 67, 33, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(101, 67, 33, 0.12) 0%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(210, 180, 140, 0.08) 0%, transparent 60%);
}

/* 8. Recycled Paper - Slightly rough texture */
.bg-recycled-paper {
  background-color: #E8E6E1;
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='recycled'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' seed='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23recycled)' opacity='0.15' fill='%23333333'/%3E%3C/svg%3E");
}

/* 9. Newspaper Texture - Gray with halftone effect */
.bg-newspaper {
  background-color: #D3D0CC;
  background-image: 
    repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.1) 2px),
    repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.1) 2px);
  background-size: 3px 3px;
}

/* 10. Linen Paper - Woven texture */
.bg-linen-paper {
  background-color: #F5F3F0;
  background-image: 
    repeating-linear-gradient(0deg, rgba(120, 100, 80, 0.03) 0px, rgba(120, 100, 80, 0.03) 1px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(120, 100, 80, 0.03) 0px, rgba(120, 100, 80, 0.03) 1px, transparent 1px, transparent 2px);
  background-size: 4px 4px;
}

/* 11. Ivory Paper - Warm, soft white */
.bg-ivory-paper {
  background-color: #FFFFF0;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(210, 180, 140, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(210, 180, 140, 0.03) 0%, transparent 50%);
}

/* 12. Rough Book Paper - Uneven surface */
.bg-rough-book {
  background-color: #E5E2DB;
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='rough'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='5' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23rough)' opacity='0.08' fill='%23000000'/%3E%3C/svg%3E");
}

/* 13. Handmade Paper - Organic, irregular texture */
.bg-handmade-paper {
  background-color: #F0EDE6;
  background-image: 
    radial-gradient(circle at 15% 25%, rgba(139, 90, 43, 0.08) 0%, transparent 30%),
    radial-gradient(circle at 70% 15%, rgba(139, 90, 43, 0.06) 0%, transparent 25%),
    radial-gradient(circle at 85% 75%, rgba(139, 90, 43, 0.07) 0%, transparent 28%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='handmade'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='3' seed='5'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23handmade)' opacity='0.04' fill='%23333333'/%3E%3C/svg%3E");
}

/* 14. Vintage Paper - Aged, spotted appearance */
.bg-vintage-paper {
  background-color: #E6DDD0;
  background-image: 
    radial-gradient(circle at 12% 8%, rgba(139, 69, 19, 0.2) 0%, transparent 25%),
    radial-gradient(circle at 88% 92%, rgba(139, 69, 19, 0.18) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(210, 180, 140, 0.1) 0%, transparent 70%);
}

/* 15. Archival Paper - Museum quality, neutral */
.bg-archival-paper {
  background-color: #FAFAF8;
  background-image: 
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(180, 170, 160, 0.02) 10px, rgba(180, 170, 160, 0.02) 20px),
    repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(180, 170, 160, 0.02) 10px, rgba(180, 170, 160, 0.02) 20px);
}

/* 16. Photocopied Paper - Slightly darker, mechanical look */
.bg-photocopied {
  background-color: #F2F0EB;
  background-image: 
    repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(0, 0, 0, 0.08) 1px, rgba(0, 0, 0, 0.08) 2px),
    repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0, 0, 0, 0.08) 1px, rgba(0, 0, 0, 0.08) 2px),
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0, 0, 0, 0.03) 2px, rgba(0, 0, 0, 0.03) 4px);
  background-size: 4px 4px, 4px 4px, 8px 8px;
}

/* 17. Yellowed Paper - Time-worn appearance */
.bg-yellowed-paper {
  background-color: #F0E68C;
  background-image: 
    radial-gradient(circle at 5% 10%, rgba(184, 134, 11, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 95% 85%, rgba(184, 134, 11, 0.12) 0%, transparent 45%),
    linear-gradient(135deg, transparent 30%, rgba(184, 134, 11, 0.03) 30.5%, rgba(184, 134, 11, 0.03) 60%, transparent 60.5%);
  background-size: 100% 100%, 100% 100%, 4px 4px;
}

/* 18. Cream Paper - Smooth, classic */
.bg-cream-paper {
  background-color: #FFFDD0;
  background-image: 
    radial-gradient(ellipse at 20% 50%, rgba(210, 180, 140, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(210, 180, 140, 0.06) 0%, transparent 60%);
}

/* 19. Gray Office Paper - Professional, neutral */
.bg-gray-office {
  background-color: #E8E8E8;
  background-image: 
    repeating-linear-gradient(90deg, rgba(100, 100, 100, 0.02) 0px, rgba(100, 100, 100, 0.02) 1px, transparent 1px, transparent 2px),
    repeating-linear-gradient(0deg, rgba(100, 100, 100, 0.02) 0px, rgba(100, 100, 100, 0.02) 1px, transparent 1px, transparent 2px);
  background-size: 3px 3px;
}

/* 20. Stationery Paper - Subtle watermark effect */
.bg-stationery-paper {
  background-color: #FAFBFC;
  background-image: 
    repeating-linear-gradient(0deg, transparent 0px, transparent 20px, rgba(100, 130, 180, 0.02) 20px, rgba(100, 130, 180, 0.02) 21px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 20px, rgba(100, 130, 180, 0.02) 20px, rgba(100, 130, 180, 0.02) 21px);
}

/* 21. Academic Thesis Paper - Off-white with subtle structure */
.bg-academic-thesis {
  background-color: #F9F8F6;
  background-image: 
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0, 0, 0, 0.01) 2px, rgba(0, 0, 0, 0.01) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0, 0, 0, 0.01) 2px, rgba(0, 0, 0, 0.01) 4px),
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.02) 100%);
}

/* 22. Government Gazette Paper - Official white with seal texture */
.bg-government-gazette {
  background-color: #FEFEFD;
  background-image: 
    repeating-linear-gradient(0deg, transparent 0px, transparent 40px, rgba(70, 130, 180, 0.015) 40px, rgba(70, 130, 180, 0.015) 41px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 40px, rgba(70, 130, 180, 0.015) 40px, rgba(70, 130, 180, 0.015) 41px);
}

/* 23. Bible / Scripture Paper - Very thin, tissue-like */
.bg-bible-scripture {
  background-color: #FCFBF7;
  background-image: 
    repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(200, 180, 160, 0.08) 3px, rgba(200, 180, 160, 0.08) 4px),
    repeating-linear-gradient(90deg, rgba(200, 180, 160, 0.03) 0px, rgba(200, 180, 160, 0.03) 1px, transparent 1px, transparent 2px);
}

/* 24. Diary / Journal Paper - Warm off-white with personal touch */
.bg-diary-journal {
  background-color: #F7F5F1;
  background-image: 
    repeating-linear-gradient(0deg, transparent 0px, transparent 25px, rgba(139, 90, 43, 0.02) 25px, rgba(139, 90, 43, 0.02) 26px),
    radial-gradient(circle at 50% 50%, transparent 0%, rgba(139, 90, 43, 0.02) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='diary'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' seed='7'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23diary)' opacity='0.02' fill='%23000000'/%3E%3C/svg%3E");
}

/* 25. Notary Document Paper - Formal, pristine white */
.bg-notary-document {
  background-color: #FFFFFE;
  background-image: 
    repeating-linear-gradient(0deg, transparent 0px, transparent 35px, rgba(0, 0, 0, 0.01) 35px, rgba(0, 0, 0, 0.01) 36px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 50px, rgba(0, 0, 0, 0.01) 50px, rgba(0, 0, 0, 0.01) 51px);
}

/* ============================================================
   HELPER STYLES FOR TEXTURE BUTTONS
   ============================================================ */

/* Texture selector toolbar */
.texture-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  padding: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 999;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  overflow-y: auto;
  max-height: 120px;
}

.texture-toolbar label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #333;
  margin-right: 0.5rem;
  white-space: nowrap;
}

.texture-button {
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  font-family: "Inter", sans-serif;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.texture-button:hover {
  background: #f0f0f0;
  border-color: #999;
}

.texture-button.active {
  background: #1F2933;
  color: white;
  border-color: #1F2933;
}

/* Adjust body padding when toolbar is present */
body.has-texture-toolbar {
  padding-top: 120px;
}