/* ═══════════════════════════════════════════════════════
   AFRO-BIM PATTERN LIBRARY v2.0 — Light Mode
   African textile–inspired geometric background textures
   Opacities tuned for warm ivory backgrounds
═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   1. KENTE GRID
══════════════════════════════════════════ */
.pattern-kente {
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 22px, rgba(200,137,42,0.10) 22px, rgba(200,137,42,0.10) 23px),
    repeating-linear-gradient(90deg,  transparent, transparent 22px, rgba(200,137,42,0.10) 22px, rgba(200,137,42,0.10) 23px),
    repeating-linear-gradient(0deg,   transparent, transparent 66px, rgba(0,158,149,0.09)  66px, rgba(0,158,149,0.09)  68px),
    repeating-linear-gradient(90deg,  transparent, transparent 66px, rgba(0,158,149,0.09)  66px, rgba(0,158,149,0.09)  68px);
  background-size: 68px 68px;
}

/* ══════════════════════════════════════════
   2. ADINKRA DIAMONDS
══════════════════════════════════════════ */
.pattern-adinkra {
  background-image:
    repeating-linear-gradient(45deg,  rgba(200,137,42,0.12) 0, rgba(200,137,42,0.12) 1px, transparent 0, transparent 50%),
    repeating-linear-gradient(-45deg, rgba(200,137,42,0.12) 0, rgba(200,137,42,0.12) 1px, transparent 0, transparent 50%);
  background-size: 28px 28px;
}

.pattern-adinkra-teal {
  background-image:
    repeating-linear-gradient(45deg,  rgba(0,158,149,0.10) 0, rgba(0,158,149,0.10) 1px, transparent 0, transparent 50%),
    repeating-linear-gradient(-45deg, rgba(0,158,149,0.10) 0, rgba(0,158,149,0.10) 1px, transparent 0, transparent 50%);
  background-size: 28px 28px;
}

/* ══════════════════════════════════════════
   3. BOGOLAN CROSS-HATCH
══════════════════════════════════════════ */
.pattern-bogolan {
  background-image:
    repeating-linear-gradient(0deg,  rgba(200,137,42,0.08) 0, rgba(200,137,42,0.08) 1px, transparent 0, transparent 12px),
    repeating-linear-gradient(90deg, rgba(200,137,42,0.08) 0, rgba(200,137,42,0.08) 1px, transparent 0, transparent 12px),
    repeating-linear-gradient(0deg,  rgba(0,158,149,0.06)  0, rgba(0,158,149,0.06)  1px, transparent 0, transparent 36px),
    repeating-linear-gradient(90deg, rgba(0,158,149,0.06)  0, rgba(0,158,149,0.06)  1px, transparent 0, transparent 36px);
  background-size: 36px 36px;
}

/* ══════════════════════════════════════════
   4. ANKARA DOTS
══════════════════════════════════════════ */
.pattern-ankara {
  background-image: radial-gradient(circle, rgba(200,137,42,0.18) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}

.pattern-ankara-teal {
  background-image: radial-gradient(circle, rgba(0,158,149,0.15) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}

/* ══════════════════════════════════════════
   5. ENGINEERING DATUM GRID
══════════════════════════════════════════ */
.pattern-datum-grid {
  background-image:
    linear-gradient(rgba(200,137,42,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,137,42,0.10) 1px, transparent 1px),
    linear-gradient(rgba(200,137,42,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,137,42,0.05) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}

.pattern-datum-grid-teal {
  background-image:
    linear-gradient(rgba(0,158,149,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,158,149,0.10) 1px, transparent 1px),
    linear-gradient(rgba(0,158,149,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,158,149,0.05) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}

/* ══════════════════════════════════════════
   6. HERO COMBINED PATTERN
══════════════════════════════════════════ */
.pattern-hero {
  background-image:
    repeating-linear-gradient(0deg,   rgba(200,137,42,0.07) 0, rgba(200,137,42,0.07) 1px, transparent 0, transparent 80px),
    repeating-linear-gradient(90deg,  rgba(200,137,42,0.07) 0, rgba(200,137,42,0.07) 1px, transparent 0, transparent 80px),
    repeating-linear-gradient(0deg,   rgba(0,158,149,0.05)  0, rgba(0,158,149,0.05)  1px, transparent 0, transparent 24px),
    repeating-linear-gradient(90deg,  rgba(0,158,149,0.05)  0, rgba(0,158,149,0.05)  1px, transparent 0, transparent 24px),
    repeating-linear-gradient(45deg,  rgba(200,137,42,0.04) 0, rgba(200,137,42,0.04) 1px, transparent 0, transparent 40px),
    repeating-linear-gradient(-45deg, rgba(200,137,42,0.04) 0, rgba(200,137,42,0.04) 1px, transparent 0, transparent 40px);
  background-size: 80px 80px, 80px 80px, 24px 24px, 24px 24px, 40px 40px, 40px 40px;
}

/* ══════════════════════════════════════════
   7. DIAMOND TILE (new — geometric theme)
══════════════════════════════════════════ */
.pattern-diamonds {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpolygon points='24%2C3 45%2C24 24%2C45 3%2C24' fill='none' stroke='rgba(200%2C137%2C42%2C0.15)' stroke-width='0.8'/%3E%3C/svg%3E");
  background-size: 48px 48px;
}

.pattern-diamonds-teal {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpolygon points='24%2C3 45%2C24 24%2C45 3%2C24' fill='none' stroke='rgba(0%2C158%2C149%2C0.14)' stroke-width='0.8'/%3E%3C/svg%3E");
  background-size: 48px 48px;
}

/* ══════════════════════════════════════════
   8. HEXAGONAL GRID (new — BIM wireframe)
══════════════════════════════════════════ */
.pattern-hexgrid {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpolygon points='28%2C2 54%2C17 54%2C47 28%2C62 2%2C47 2%2C17' fill='none' stroke='rgba(200%2C137%2C42%2C0.12)' stroke-width='0.8'/%3E%3Cpolygon points='28%2C50 54%2C65 54%2C95 28%2C110 2%2C95 2%2C65' fill='none' stroke='rgba(0%2C158%2C149%2C0.10)' stroke-width='0.8'/%3E%3C/svg%3E");
  background-size: 56px 97px;
}

/* ══════════════════════════════════════════
   9. TRIANGLES (new — geometric theme)
══════════════════════════════════════════ */
.pattern-triangles {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpolygon points='30%2C3 57%2C49 3%2C49' fill='none' stroke='rgba(200%2C137%2C42%2C0.12)' stroke-width='0.8'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpolygon points='30%2C49 57%2C3 3%2C3' fill='none' stroke='rgba(0%2C158%2C149%2C0.08)' stroke-width='0.8'/%3E%3C/svg%3E");
  background-size: 60px 52px;
}

/* ══════════════════════════════════════════
   ANIMATED PATTERN
══════════════════════════════════════════ */
.pattern-animated { animation: pattern-drift 60s linear infinite; }
@keyframes pattern-drift { 0%{background-position:0 0}100%{background-position:80px 80px} }

/* ══════════════════════════════════════════
   SECTION OVERLAYS
══════════════════════════════════════════ */
.section-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(45deg,  rgba(200,137,42,0.07) 0, rgba(200,137,42,0.07) 1px, transparent 0, transparent 30px),
    repeating-linear-gradient(-45deg, rgba(0,158,149,0.05)  0, rgba(0,158,149,0.05)  1px, transparent 0, transparent 30px);
  background-size: 30px 30px;
}
.section-pattern > * { position: relative; z-index: 1; }

.section-kente::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(0deg,  rgba(200,137,42,0.07) 0, rgba(200,137,42,0.07) 1px, transparent 0, transparent 22px),
    repeating-linear-gradient(90deg, rgba(200,137,42,0.07) 0, rgba(200,137,42,0.07) 1px, transparent 0, transparent 22px),
    repeating-linear-gradient(0deg,  rgba(0,158,149,0.05)  0, rgba(0,158,149,0.05)  1px, transparent 0, transparent 66px),
    repeating-linear-gradient(90deg, rgba(0,158,149,0.05)  0, rgba(0,158,149,0.05)  1px, transparent 0, transparent 66px);
  background-size: 66px 66px;
}
.section-kente > * { position: relative; z-index: 1; }

/* Diamonds section overlay */
.section-diamonds::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpolygon points='28%2C3 53%2C28 28%2C53 3%2C28' fill='none' stroke='rgba(200%2C137%2C42%2C0.14)' stroke-width='0.8'/%3E%3Ccircle cx='28' cy='28' r='2' fill='rgba(0%2C158%2C149%2C0.10)'/%3E%3C/svg%3E");
  background-size: 56px 56px;
}
.section-diamonds > * { position: relative; z-index: 1; }

/* ══════════════════════════════════════════
   SVG ADINKRA MOTIF
══════════════════════════════════════════ */
.pattern-adinkra-svg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='12' fill='none' stroke='rgba(200%2C137%2C42%2C0.14)' stroke-width='1'/%3E%3Ccircle cx='20' cy='20' r='4' fill='rgba(200%2C137%2C42%2C0.09)'/%3E%3Cline x1='20' y1='8' x2='20' y2='32' stroke='rgba(200%2C137%2C42%2C0.10)' stroke-width='1'/%3E%3Cline x1='8' y1='20' x2='32' y2='20' stroke='rgba(200%2C137%2C42%2C0.10)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}

.pattern-adinkra-svg-teal {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='12' fill='none' stroke='rgba(0%2C158%2C149%2C0.14)' stroke-width='1'/%3E%3Ccircle cx='20' cy='20' r='4' fill='rgba(0%2C158%2C149%2C0.09)'/%3E%3Cline x1='20' y1='8' x2='20' y2='32' stroke='rgba(0%2C158%2C149%2C0.10)' stroke-width='1'/%3E%3Cline x1='8' y1='20' x2='32' y2='20' stroke='rgba(0%2C158%2C149%2C0.10)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}

/* ══════════════════════════════════════════
   DARK SECTION PATTERN OVERRIDES
   Use inside .section-dark / .section-darker
══════════════════════════════════════════ */
.section-dark .pattern-diamonds,
.section-darker .pattern-diamonds {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpolygon points='24%2C3 45%2C24 24%2C45 3%2C24' fill='none' stroke='rgba(200%2C137%2C42%2C0.08)' stroke-width='0.8'/%3E%3C/svg%3E");
}