/* Background patterns — faithful to Lea Verou's css3patterns gallery
   (https://projects.verou.me/css3patterns), recolored with Peels doc
   surfaces. Each variable is a complete `background` shorthand:
   image layers with position / size, color in the last layer.
   The pattern color is mostly transparent so it stays discreet. */

:root {
  /* Drawing color: solid panel-soft.
     Base color: half-transparent panel, so the cell blends
     with the page background behind it. */
  --pattern-color: color-mix(in oklch, var(--peels-surface-panel-soft, #ddd) 50%, transparent);
  --pattern-bg: color-mix(in oklch, var(--peels-surface-panel, #eee) 20%, transparent);

  /* Zig-Zag (eCSSpert) — 100px tile, first layers offset -50px 0 */
  --pattern-zigzag:
    linear-gradient(135deg, var(--pattern-color) 25%, transparent 25%) -50px 0 / 100px 100px,
    linear-gradient(225deg, var(--pattern-color) 25%, transparent 25%) -50px 0 / 100px 100px,
    linear-gradient(315deg, var(--pattern-color) 25%, transparent 25%) 0 0 / 100px 100px,
    linear-gradient(45deg, var(--pattern-color) 25%, transparent 25%) 0 0 / 100px 100px
    var(--pattern-bg);

  /* Waves (Lea Verou) — 75×100 tile, second layer offset 0 -50px */
  --pattern-waves:
    radial-gradient(circle at 100% 50%, transparent 20%, var(--pattern-color) 21%, var(--pattern-color) 34%, transparent 35%, transparent) 0 0 / 75px 100px,
    radial-gradient(circle at 0% 50%, transparent 20%, var(--pattern-color) 21%, var(--pattern-color) 34%, transparent 35%, transparent) 0 -50px / 75px 100px
    var(--pattern-bg);

  /* Cross-Dots (Natali Davydova) — 109px tile, dots + rules + diagonals */
  --pattern-cross-dots:
    radial-gradient(var(--pattern-color) 3px, transparent 4px) 54px 55px / 109px 109px,
    radial-gradient(var(--pattern-color) 3px, transparent 4px) 0 0 / 109px 109px,
    linear-gradient(var(--pattern-color) 4px, transparent 0) 0 0 / 100% 6px,
    linear-gradient(45deg, transparent 74px, transparent 75px, var(--pattern-color) 75px, var(--pattern-color) 76px, transparent 77px, transparent 109px) 0 0 / 109px 109px,
    linear-gradient(-45deg, transparent 75px, transparent 76px, var(--pattern-color) 76px, var(--pattern-color) 77px, transparent 78px, transparent 109px) 0 0 / 109px 109px
    var(--pattern-bg);
}