/* نسخهٔ deployشده از IWUT pattern library؛ URLها با ساختار assets/ قالب تطبیق داده شده‌اند. */

:root {
  --iwut-blue: #123A6B;
  --iwut-blue-deep: #0B2347;
  --iwut-turquoise: #12A3A3;
  --iwut-gold: #C8A24A;
  --iwut-gold-soft: #E3CE96;
  --iwut-cream: #FBF6EA;
  --iwut-ink: #10201A;
  /* رنگ الگوهای کاشی‌کاری/بی‌درز */
  --pat-1: var(--iwut-turquoise);
  --pat-2: var(--iwut-gold);
}

/* --- ۱) استفاده‌ی درون‌خطی: <svg class="iwut-pat"> ... </svg> --- */
.iwut-pat { display: block; width: 100%; height: auto; overflow: visible; color: var(--iwut-turquoise); }
.iwut-pat--gold  { color: var(--iwut-gold); }
.iwut-pat--blue  { color: var(--iwut-blue); }
.iwut-pat--cream { color: var(--iwut-cream); }
.iwut-pat--ink   { color: var(--iwut-ink); }

/* --- ۲) استفاده‌ی ماسکی: شکل از mask و رنگ از background-color --- */
[class*="iwut-pat-"] {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.iwut-pat--tile  { height: 200px; -webkit-mask-size: 120px 120px;         mask-size: 120px 120px; }
.iwut-pat--band  { height: 44px;  -webkit-mask-size: auto 100%;           mask-size: auto 100%;
                    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; }
.iwut-pat--shape { height: 140px; -webkit-mask-size: contain;             mask-size: contain;
                    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* --- ۳) فایل هر الگو --- */
.iwut-pat-girih-khatim-8star { -webkit-mask-image: url(svg/girih/girih-khatim-8star.svg); mask-image: url(svg/girih/girih-khatim-8star.svg); }
.iwut-pat-girih-octagon-star-tiling { -webkit-mask-image: url(svg/girih/girih-octagon-star-tiling.svg); mask-image: url(svg/girih/girih-octagon-star-tiling.svg); }
.iwut-pat-girih-star-cross-tiling { -webkit-mask-image: url(svg/girih/girih-star-cross-tiling.svg); mask-image: url(svg/girih/girih-star-cross-tiling.svg); }
.iwut-pat-girih-hexagon-rosette { -webkit-mask-image: url(svg/girih/girih-hexagon-rosette.svg); mask-image: url(svg/girih/girih-hexagon-rosette.svg); }
.iwut-pat-girih-strap-interlace { -webkit-mask-image: url(svg/girih/girih-strap-interlace.svg); mask-image: url(svg/girih/girih-strap-interlace.svg); }
.iwut-pat-arch-mihrab-pointed { -webkit-mask-image: url(svg/arch/arch-mihrab-pointed.svg); mask-image: url(svg/arch/arch-mihrab-pointed.svg); }
.iwut-pat-arch-mihrab-ogee { -webkit-mask-image: url(svg/arch/arch-mihrab-ogee.svg); mask-image: url(svg/arch/arch-mihrab-ogee.svg); }
.iwut-pat-arch-horseshoe { -webkit-mask-image: url(svg/arch/arch-horseshoe.svg); mask-image: url(svg/arch/arch-horseshoe.svg); }
.iwut-pat-arch-panel-girih-window { -webkit-mask-image: url(svg/arch/arch-panel-girih-window.svg); mask-image: url(svg/arch/arch-panel-girih-window.svg); }
.iwut-pat-arch-muqarnas-crest { -webkit-mask-image: url(svg/arch/arch-muqarnas-crest.svg); mask-image: url(svg/arch/arch-muqarnas-crest.svg); }
.iwut-pat-medallion-shamse-16 { -webkit-mask-image: url(svg/medallion/medallion-shamse-16.svg); mask-image: url(svg/medallion/medallion-shamse-16.svg); }
.iwut-pat-medallion-toranj-8lobe { -webkit-mask-image: url(svg/medallion/medallion-toranj-8lobe.svg); mask-image: url(svg/medallion/medallion-toranj-8lobe.svg); }
.iwut-pat-medallion-star-rosette { -webkit-mask-image: url(svg/medallion/medallion-star-rosette.svg); mask-image: url(svg/medallion/medallion-star-rosette.svg); }
.iwut-pat-medallion-lobed-cartouche { -webkit-mask-image: url(svg/medallion/medallion-lobed-cartouche.svg); mask-image: url(svg/medallion/medallion-lobed-cartouche.svg); }
.iwut-pat-frame-tazhib-rect { -webkit-mask-image: url(svg/frame/frame-tazhib-rect.svg); mask-image: url(svg/frame/frame-tazhib-rect.svg); }
.iwut-pat-frame-lobed-label { -webkit-mask-image: url(svg/frame/frame-lobed-label.svg); mask-image: url(svg/frame/frame-lobed-label.svg); }
.iwut-pat-frame-arch-panel { -webkit-mask-image: url(svg/frame/frame-arch-panel.svg); mask-image: url(svg/frame/frame-arch-panel.svg); }
.iwut-pat-frame-cartouche-scroll { -webkit-mask-image: url(svg/frame/frame-cartouche-scroll.svg); mask-image: url(svg/frame/frame-cartouche-scroll.svg); }
.iwut-pat-frame-banner-plate { -webkit-mask-image: url(svg/frame/frame-banner-plate.svg); mask-image: url(svg/frame/frame-banner-plate.svg); }
.iwut-pat-border-rosette-chain { -webkit-mask-image: url(svg/border/border-rosette-chain.svg); mask-image: url(svg/border/border-rosette-chain.svg); }
.iwut-pat-border-khatai-vine { -webkit-mask-image: url(svg/border/border-khatai-vine.svg); mask-image: url(svg/border/border-khatai-vine.svg); }
.iwut-pat-border-star-cross-band { -webkit-mask-image: url(svg/border/border-star-cross-band.svg); mask-image: url(svg/border/border-star-cross-band.svg); }
.iwut-pat-border-palmette-pair { -webkit-mask-image: url(svg/border/border-palmette-pair.svg); mask-image: url(svg/border/border-palmette-pair.svg); }
.iwut-pat-border-chevron-x { -webkit-mask-image: url(svg/border/border-chevron-x.svg); mask-image: url(svg/border/border-chevron-x.svg); }
.iwut-pat-border-diamond-star { -webkit-mask-image: url(svg/border/border-diamond-star.svg); mask-image: url(svg/border/border-diamond-star.svg); }
.iwut-pat-motif-star-8 { -webkit-mask-image: url(svg/motif/motif-star-8.svg); mask-image: url(svg/motif/motif-star-8.svg); }
.iwut-pat-motif-khatai-leaf { -webkit-mask-image: url(svg/motif/motif-khatai-leaf.svg); mask-image: url(svg/motif/motif-khatai-leaf.svg); }
.iwut-pat-motif-eslimi-scroll { -webkit-mask-image: url(svg/motif/motif-eslimi-scroll.svg); mask-image: url(svg/motif/motif-eslimi-scroll.svg); }
.iwut-pat-motif-palmette { -webkit-mask-image: url(svg/motif/motif-palmette.svg); mask-image: url(svg/motif/motif-palmette.svg); }
.iwut-pat-motif-rosette-small { -webkit-mask-image: url(svg/motif/motif-rosette-small.svg); mask-image: url(svg/motif/motif-rosette-small.svg); }