:root {
  /* Accessibility Patterns (SVG Data URIs) */
  --pattern-dots-dark: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='2.5' fill='%23000' /%3E%3C/svg%3E");
  --pattern-dots-light: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='2.5' fill='%23fff' /%3E%3C/svg%3E");
  --pattern-stripes-dark: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,20 L20,0 M-5,5 L5,-5 M15,25 L25,15' stroke='%23000' stroke-width='3' /%3E%3C/svg%3E");
  --pattern-stripes-light: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,20 L20,0 M-5,5 L5,-5 M15,25 L25,15' stroke='%23fff' stroke-width='3' /%3E%3C/svg%3E");
  --pattern-crosshatch-dark: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,20 L20,0 M-5,5 L5,-5 M15,25 L25,15 M0,0 L20,20 M-5,15 L5,25 M15,-5 L25,5' stroke='%23000' stroke-width='2' /%3E%3C/svg%3E");
  --pattern-crosshatch-light: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,20 L20,0 M-5,5 L5,-5 M15,25 L25,15 M0,0 L20,20 M-5,15 L5,25 M15,-5 L25,5' stroke='%23fff' stroke-width='2' /%3E%3C/svg%3E");
  --pattern-horizontal-dark: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='10' x2='20' y2='10' stroke='%23000' stroke-width='3' /%3E%3C/svg%3E");
  --pattern-horizontal-light: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='10' x2='20' y2='10' stroke='%23fff' stroke-width='3' /%3E%3C/svg%3E");
}

body.paint-mode {
  --pattern-dots: var(--pattern-dots-dark);
  --pattern-stripes: var(--pattern-stripes-dark);
  --pattern-crosshatch: var(--pattern-crosshatch-dark);
  --pattern-horizontal: var(--pattern-horizontal-dark);
}

body.light-mode {
  --pattern-dots: var(--pattern-dots-light);
  --pattern-stripes: var(--pattern-stripes-light);
  --pattern-crosshatch: var(--pattern-crosshatch-light);
  --pattern-horizontal: var(--pattern-horizontal-light);
}

/* Accessibility Patterns Overlay */
body.accessibility-mode .pattern-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.25;
  border-radius: inherit;
  background-repeat: repeat;
}

.pattern-red { background-image: var(--pattern-stripes); }
.pattern-blue { background-image: var(--pattern-dots); }
.pattern-yellow { background-image: var(--pattern-crosshatch); }
.pattern-green { background-image: var(--pattern-horizontal); }