/* Tile patterns for profile page backgrounds. Applied as a body class
   (pattern-<key>) over the user's chosen background color, and as .swatch
   previews in the theme editor. Semi-transparent ink so they work on any
   color. Keys must match PATTERN_KEYS in src/services/profileTheme.ts. */

.pattern-dots { background-image: radial-gradient(rgba(0,0,0,.11) 1.5px, transparent 1.5px); background-size: 14px 14px; }

.pattern-grid { background-image:
  linear-gradient(rgba(0,0,0,.08) 1px, transparent 1px),
  linear-gradient(90deg, rgba(0,0,0,.08) 1px, transparent 1px);
  background-size: 18px 18px; }

.pattern-stripes_diag { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.07) 0 6px, transparent 6px 16px); }

.pattern-stripes_h { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 5px, transparent 5px 16px); }

.pattern-stripes_v { background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 5px, transparent 5px 16px); }

.pattern-checker { background-image: repeating-conic-gradient(rgba(0,0,0,.07) 0% 25%, transparent 0% 50%); background-size: 24px 24px; }

.pattern-plus { background-image:
  linear-gradient(rgba(0,0,0,.09) 2px, transparent 2px),
  linear-gradient(90deg, rgba(0,0,0,.09) 2px, transparent 2px);
  background-size: 22px 22px, 22px 22px;
  background-position: 0 10px, 10px 0; }

.pattern-zigzag { background-image:
  linear-gradient(135deg, rgba(0,0,0,.08) 25%, transparent 25%),
  linear-gradient(225deg, rgba(0,0,0,.08) 25%, transparent 25%),
  linear-gradient(45deg, rgba(0,0,0,.08) 25%, transparent 25%),
  linear-gradient(315deg, rgba(0,0,0,.08) 25%, transparent 25%);
  background-size: 20px 20px;
  background-position: 10px 0, 10px 0, 0 0, 0 0; }

.pattern-waves { background-image:
  radial-gradient(circle at 100% 50%, transparent 20%, rgba(0,0,0,.07) 21%, rgba(0,0,0,.07) 34%, transparent 35%, transparent),
  radial-gradient(circle at 0% 50%, transparent 20%, rgba(0,0,0,.07) 21%, rgba(0,0,0,.07) 34%, transparent 35%, transparent);
  background-size: 30px 15px; }

.pattern-circles { background-image: radial-gradient(circle, rgba(0,0,0,.09) 5px, transparent 5.5px); background-size: 24px 24px; }

.pattern-rings { background-image: radial-gradient(circle, transparent 6px, rgba(0,0,0,.09) 6.5px 8.5px, transparent 9px); background-size: 26px 26px; }

.pattern-diamonds { background-image:
  linear-gradient(45deg, rgba(0,0,0,.07) 25%, transparent 25%),
  linear-gradient(-45deg, rgba(0,0,0,.07) 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, rgba(0,0,0,.07) 75%),
  linear-gradient(-45deg, transparent 75%, rgba(0,0,0,.07) 75%);
  background-size: 22px 22px; }

.pattern-triangles { background-image:
  linear-gradient(45deg, rgba(0,0,0,.08) 50%, transparent 50%);
  background-size: 18px 18px; }

.pattern-bricks { background-image:
  linear-gradient(rgba(0,0,0,.10) 2px, transparent 2px),
  linear-gradient(90deg, rgba(0,0,0,.10) 2px, transparent 2px),
  linear-gradient(90deg, rgba(0,0,0,.10) 2px, transparent 2px);
  background-size: 30px 16px, 60px 32px, 60px 32px;
  background-position: 0 0, 0 0, 30px 16px; }

.pattern-hearts { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 7c1-2.5 5-2.5 5 .5 0 2-3 4.5-5 6-2-1.5-5-4-5-6C7 4.5 11 4.5 12 7z' fill='rgba(0,0,0,0.09)'/%3E%3C/svg%3E"); }

.pattern-stars { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 6l1.8 4.1 4.5.4-3.4 3 1 4.4L14 15.6l-3.9 2.3 1-4.4-3.4-3 4.5-.4z' fill='rgba(0,0,0,0.09)'/%3E%3C/svg%3E"); }

.pattern-crosshatch { background-image:
  repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 1.5px, transparent 1.5px 10px),
  repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 1.5px, transparent 1.5px 10px); }

.pattern-scales { background-image:
  radial-gradient(circle at 50% 100%, transparent 11px, rgba(0,0,0,.08) 11.5px 13px, transparent 13.5px);
  background-size: 24px 12px; }

.pattern-honeycomb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48'%3E%3Cpath d='M14 1l12 7v16l-12 7L2 24V8zM14 33l12 7v8h-2l-10-6-10 6H2v-8z' fill='none' stroke='rgba(0,0,0,0.10)' stroke-width='1.5'/%3E%3C/svg%3E"); }

.pattern-confetti { background-image:
  radial-gradient(rgba(59,89,152,.14) 2px, transparent 2px),
  radial-gradient(rgba(180,40,40,.12) 2px, transparent 2px),
  radial-gradient(rgba(40,140,60,.12) 2px, transparent 2px),
  radial-gradient(rgba(200,150,20,.14) 2px, transparent 2px);
  background-size: 37px 37px, 41px 41px, 43px 43px, 47px 47px;
  background-position: 0 0, 11px 17px, 23px 5px, 31px 29px; }